Пайпы: встроенные и свои

Пайп (pipe) — функция-преобразователь для шаблона. Значение передают пайпу через вертикальную черту, и он возвращает его в нужном виде: дату — как «03.10.2026», число — как сумму в евро. Данные в классе при этом не меняются.

Первый пайп

Встроенные пайпы лежат в @angular/common, и каждый нужно добавить в imports компонента:

// src/app/post-detail/post-detail.ts
import { Component } from '@angular/core';
import { UpperCasePipe } from '@angular/common';
 
@Component({
  selector: 'app-post-detail',
  imports: [UpperCasePipe],
  templateUrl: './post-detail.html',
})
export class PostDetail {
  title = 'Новости недели';
}

<!-- src/app/post-detail/post-detail.html -->
<h2>{{ title | uppercase }}</h2>

На странице заголовок будет написан заглавными буквами: «НОВОСТИ НЕДЕЛИ».

Параметры

После имени пайпа через двоеточие передают параметры:

<!-- src/app/post-detail/post-detail.html -->
<p>{{ published | date: 'dd.MM.yyyy HH:mm' }}</p>
<p>{{ price | currency: 'EUR' }}</p>
<p>{{ rating | number: '1.1-1' }}</p>
<p>{{ body | slice: 0 : 100 }}...</p>

Если published = new Date(2026, 9, 3, 14, 5), price = 9.5, rating = 4.25, на странице будет «03.10.2026 14:05», «€9.50», «4.3» и первые сто символов текста. Добавьте в imports нужные классы: DatePipe, CurrencyPipe, DecimalPipe, SlicePipe.

Полезные встроенные пайпы

Пайпы можно соединять цепочкой: {{ title | slice: 0 : 20 | uppercase }}.

Свой пайп

Сделаем пайп, который обрезает длинный текст и ставит многоточие:

ng generate pipe truncate

CLI создаст src/app/truncate-pipe.ts (в версиях до 20 — truncate.pipe.ts):

// src/app/truncate-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 50): string {
    return value.length > limit ? value.slice(0, limit) + '…' : value;
  }
}

Метод transform получает значение и параметры и возвращает результат. Имя для шаблона задаёт name.

<!-- src/app/post-list/post-list.html -->
@for (post of posts(); track post.id) {
  <p>{{ post.body | truncate: 80 }}</p>
}

Добавьте TruncatePipe в imports компонента PostList — под каждой статьёй будет не больше 80 символов текста с многоточием.

Частая ошибка

Ждать русского формата от date и currency без настройки. По умолчанию Angular использует локаль en-US: названия месяцев будут английскими, а в суммах — точка вместо запятой. Для другой локали её регистрируют функцией registerLocaleData и задают провайдер LOCALE_ID в app.config.ts, а пока явно передавайте формат, как в примере выше.