Что такое пайпы в Angular?

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

Пайпы могут быть встроенными (включены в Angular по умолчанию) или пользовательскими (созданы вами для решения специфических задач).

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

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

Пример:

// В компоненте
export class AppComponent {
  today: number = Date.now();
}

<!-- В шаблоне -->
<p>Текущая дата: {{ today | date:'fullDate' }}</p>

В этом коде {{ today | date:'fullDate' }} использует пайп date, чтобы отформатировать переменную today в полную дату, например, "понедельник, 17 марта 2025 г."

Вот некоторые другие примеры встроенных пайпов:

• currency: используется для форматирования чисел как валюты.
• decimal: форматирует число с заданным количеством десятичных знаков.
• json: преобразует объект в строку формата JSON для отображения.

Пример с currency:

export class AppComponent {
  price: number = 123.45;
}

<p>Цена: {{ price | currency:'USD':'symbol' }}</p>

Это отобразит: "Цена: $123.45".

Создание пользовательского пайпа

Для создания пользовательского пайпа вам нужно использовать декоратор @Pipe и реализовать интерфейс PipeTransform. Например, давайте создадим пайп, который будет преобразовывать текст в верхний регистр.

Пример:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Теперь вы можете использовать этот пайп в шаблонах:

<p>Текс в верхнем регистре: {{ 'привет, мир' | uppercase }}</p>

Этот код выведет: "Текс в верхнем регистре: ПРИВЕТ, МИР".

Заключение

Пайпы — это мощный инструмент в Angular, который помогает удобно и эффективно преобразовывать данные в шаблонах. Вы можете использовать встроенные пайпы или создавать собственные, что делает ваш код более чистым и легко читаемым. Изучение пайпов является важным шагом для повышения навыков разработчика Angular.