Пайпы (pipes) в Angular — это инструменты для преобразования данных непосредственно в шаблоне. Они применяются в выражениях привязки и позволяют форматировать, фильтровать, сортировать и модифицировать данные без изменения логики компонента. Пайпы являются чистыми функциями: они принимают входное значение, возвращают изменённое и не изменяют исходные данные.

1. Синтаксис пайпов

Пайпы используются через символ вертикальной черты | в шаблонах.

Общий синтаксис:

{{ value | pipeName\[:arg1\]\[:arg2\]... }}

Примеры:

{{ 1234.56 | number:'1.2-2' }} <!-- Выводит: 1,234.56 -->

{{ today | date:'shortDate' }} <!-- Выводит: 23.07.2025 -->

{{ 'Angular' | uppercase }} <!-- Выводит: ANGULAR -->

Можно использовать пайпы в цепочке:

{{ user.name | lowercase | titlecase }}

2. Преимущества пайпов

• Улучшают читаемость шаблонов;

• Устраняют дублирование логики форматирования;

• Позволяют быстро модифицировать данные без изменения компонента;

• Могут быть повторно использованы в разных местах приложения;

• Поддерживают аргументы и параметры.

3. Встроенные пайпы Angular

Angular предоставляет набор стандартных пайпов. Ниже приведены наиболее часто используемые.

3.1. date

Форматирует дату с использованием локали.

{{ today | date }} <!-- Jul 23, 2025 -->
{{ today | date:'fullDate' }} <!-- Wednesday, July 23, 2025 -->
{{ today | date:'yyyy-MM-dd' }} <!-- 2025-07-23 -->

Пример в TypeScript:

today = new Date();

3.2. uppercase и lowercase

Преобразуют строку в верхний или нижний регистр.

{{ 'Angular' | uppercase }} <!-- ANGULAR -->
{{ 'Angular' | lowercase }} <!-- angular -->

3.3. titlecase

Преобразует каждое слово в строке так, чтобы первая буква была заглавной.

{{ 'angular development' | titlecase }} <!-- Angular Development -->

3.4. json

Преобразует объект в форматированный JSON-текст.

<pre>{{ user | json }}</pre>
user = { name: 'John', age: 30 };

Вывод:

{
"name": "John",
"age": 30
}

3.5. slice

Извлекает часть массива или строки.

{{ \[1,2,3,4,5\] | slice:1:3 }} <!-- \[2,3\] -->
{{ 'Angular' | slice:1:4 }} <!-- ngu -->

3.6. number

Форматирует число.

{{ 1234.5678 | number:'1.2-2' }} <!-- 1,234.57 -->

Формат:

'minIntegerDigits.minFractionDigits-maxFractionDigits'

3.7. currency

Форматирует число как валюту.

{{ 1234.5 | currency }} <!-- $1,234.50 (по умолчанию USD) -->
{{ 1234.5 | currency:'EUR':'symbol':'4.2-2' }} <!-- €1,234.50 -->

Параметры:

• Валюта: 'USD', 'EUR', 'UZS'

• Тип символа: 'symbol', 'code', 'name'

• Формат: как в пайпе number

3.8. percent

Форматирует значение как процент.

{{ 0.875 | percent }} <!-- 88% -->
{{ 0.875 | percent:'1.1-1' }} <!-- 87.5% -->

3.9. i18nSelect

Выбирает строку в зависимости от значения.

{{ gender | i18nSelect: inviteMap }}
gender = 'male';
inviteMap = {
male: 'Добро пожаловать, господин',
female: 'Добро пожаловать, госпожа',
other: 'Добро пожаловать'
};

3.10. i18nPlural

Позволяет реализовать множественные формы на основе числа.

{{ messages.length | i18nPlural: messageMapping }}
messages = \['Сообщение 1', 'Сообщение 2'\];
messageMapping = {
'=0': 'Нет сообщений.',
'=1': '1 новое сообщение.',
other: '# новых сообщений.'
};

4. Параметры пайпов

Пайпы могут принимать параметры через двоеточие :. Можно передавать несколько параметров, разделяя их двоеточиями.

{{ value | pipeName:param1:param2 }}

Пример:

{{ 12345.6789 | number:'1.0-0' }} <!-- округлит до целого -->

5. Использование пайпов в компонентах (через PipeTransform)

Пайпы обычно используются в шаблонах, но их можно вызывать вручную:

import { DatePipe } from '@angular/common';
@Component({...})
export class MyComponent {
constructor(private datePipe: DatePipe) {
const result = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
console.log(result); // "2025-07-23"
}
}

Для этого нужно объявить пайп в providers или импортировать соответствующий модуль.

6. Чистые и нечистые пайпы

• Чистые пайпы (pure: true) — вызываются только если изменился входной аргумент.

• Нечистые пайпы (pure: false) — вызываются при каждом change detection.

Встроенные пайпы — всегда чистые, что делает их эффективными.

7. Пайпы и производительность

Так как пайпы — чистые функции, они не перерендериваются, если входные данные не изменились. Это снижает нагрузку на систему обнаружения изменений. Однако использование нечистых пайпов (например, с массивами, объектами) может привести к снижению производительности, особенно при работе с большими данными.

8. Локализация пайпов

Пайпы, такие как date, currency, number, поддерживают локализацию. Angular использует локаль, указанную в providers приложения.

Пример:

import { registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru';
registerLocaleData(localeRu);
@NgModule({
providers: \[{ provide: LOCALE_ID, useValue: 'ru' }\]
})

Теперь пайпы date, currency и number будут использовать русские форматы.