Как связывать пайпы в Angular?

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

Использование пайпов в Angular

Пайпы в Angular используются в синтаксисе интерполяции или в директивах ngFor, ngIf и других. Например, вот как можно использовать пайп для форматирования даты:

<p>Сегодня: {{ today | date }}</p>

В этом примере мы используем пайп date для форматирования текущей даты.

Связывание пайпов

Связывать пайпы можно, просто используя несколько пайпов друг за другом в одном выражении. Для этого необходимо разделить их символом |. Например, вы можете сначала воспользоваться пайпом для форматирования даты, а затем еще одним пайпом для получения строки в верхнем регистре:

<p>{{ today | date | uppercase }}</p>

В этом примере сначала будет применен пайп date, а затем результат этого пайпа будет передан в пайп uppercase, который преобразует текст в верхний регистр.

Пример с кастомными пайпами

Создадим кастомный пайп, который будет преобразовывать текст в "красивый" формат с заглавной буквой в каждом слове. Назовем его titlecase.

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

@Pipe({ name: 'titlecase' })
export class TitleCasePipe implements PipeTransform {
  transform(value: string): string {
    return value
      .toLowerCase()
      .split(' ')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  }
}

Теперь мы можем использовать этот пайп вместе с uppercase. Например, делаем текст "hello world" заглавными буквами и в красивом формате:

<p>{{ 'hello world' | titlecase | uppercase }}</p>

Результат этого выражения будет: HELLO WORLD.

Заключение

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