0Pricing
Angular Academy · Урок

Использование встроенных конвейеров

Форматируйте даты, числа и текст с помощью конвейеров.

«Использование встроенных конвейеров» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Что такое pipe

Pipe преобразует данные непосредственно в шаблоне для отображения. Сначала укажите значение, затем символ pipe |, а после него — имя pipe.

Pipe отлично подходят для форматирования дат, чисел, валюты и текста без написания дополнительной логики компонента.

Синтаксис pipe

Базовая форма выглядит так: {{ value | pipeName }}. Angular передаёт значение в pipe и отображает преобразованный результат.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Pipe uppercase и lowercase

uppercase и lowercase изменяют регистр строки. Это простые и часто используемые pipe для подписей и заголовков.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

Pipe date

Pipe date форматирует объект Date или временную метку в удобную для чтения строку. По умолчанию используется средний формат даты.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Форматирование дат

Вы можете передать строку формата в pipe date, например "shortDate", "fullDate" или собственный шаблон, такой как "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

Pipe currency

Pipe currency форматирует число как денежную сумму. По умолчанию используется USD, но вы можете передать код валюты.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Pipe number и percent

Pipe number форматирует числа с параметрами разрядов, а percent отображает значение в виде процента.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Разбор digitsInfo

Pipe number принимает строку digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Например, "1.2-2" всегда отображает ровно два знака после запятой.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

Pipe json

Pipe json сериализует любой объект в строку JSON. В основном он используется для отладки шаблонов, чтобы можно было увидеть структуру данных.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

Pipe slice

Pipe slice возвращает часть массива или строки, подобно методу slice в JavaScript. Он полезен для сокращения списков.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Импорт pipe в автономных компонентах

В автономных компонентах необходимо импортировать используемые pipe, например DatePipe или CurrencyPipe, из @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Быстрая проверка

Проверьте, насколько хорошо вы понимаете встроенные pipe.

Итоги

Вы изучили основные встроенные pipe: uppercase, lowercase, date, currency, number, percent, json и slice.

Pipe позволяют хранить форматирование в шаблоне, делая его чистым и декларативным. Далее вы научитесь объединять pipe в цепочки и передавать им аргументы.

Часто задаваемые вопросы

Урок «Использование встроенных конвейеров» бесплатный?

Да — полный текст урока «Использование встроенных конвейеров» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Использование встроенных конвейеров»?

Форматируйте даты, числа и текст с помощью конвейеров. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Использование встроенных конвейеров»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Использование встроенных конвейеров
  2. Объединение конвейеров и передача параметров
  3. Создание пользовательских конвейеров
  4. Чистые и нечистые конвейеры
← Назад к Angular Academy