Модуль 2 · урок 8 з 15

Пайпи

Пайп — це маленька функція форматування, яку видно прямо в шаблоні. Пункт із таблиці ліда виглядає дрібним, але саме тут ловлять на розумінні change detection: правильна відповідь на питання «пайп чи метод» показує, що ти розумієш, як застосунок перемальовується.

Вбудовані пайпи

{{ task.dueDate | date:'dd.MM.yyyy' }}
{{ task.dueDate | date:'short' }}
{{ price | currency:'UAH':'symbol':'1.2-2' }}
{{ ratio | percent:'1.0-1' }}
{{ total | number:'1.0-0' }}
{{ name | uppercase }} · {{ name | titlecase }}
{{ obj | json }}                          <!-- лише для дебагу -->
{{ users$ | async }}                       <!-- модуль 4 -->
{{ text | slice:0:80 }}

Пайпи можна ланцюжити — вони виконуються зліва направо:

{{ task.title | slice:0:40 | uppercase }}

Свій пайп

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

@Pipe({ name: 'dueIn' })
export class DueInPipe implements PipeTransform {
  transform(value: string | Date | null, now: Date = new Date()): string {
    if (!value) return 'без терміну';

    const due = new Date(value);
    const days = Math.round((due.getTime() - now.getTime()) / 86_400_000);

    if (days < 0)  return `прострочено на ${Math.abs(days)} дн.`;
    if (days === 0) return 'сьогодні';
    if (days === 1) return 'завтра';
    return `через ${days} дн.`;
  }
}

<!-- пайп треба імпортувати в компонент, як і будь-що інше -->
@Component({
  imports: [DueInPipe],
  template: `<span class="badge">{{ task().dueDate | dueIn }}</span>`,
})

Кілька деталей, які роблять пайп якісним:

• Обробляй null. Дані з бекенду майже завжди можуть бути порожні, а strictTemplates одразу про це нагадає.
• Типізуй вхід і вихід. transform(value: string | Date | null): string — ніяких any.
• Параметри — після першого аргументу. {{ d | dueIn:someDate }}.
• Ніяких запитів усередині. Пайп має бути миттєвим і без побічних дій.

Чисті й нечисті пайпи

За замовчуванням пайп чистий: Angular викликає transform лише тоді, коли змінилось вхідне значення (за посиланням). Це і робить пайпи дешевими.

@Pipe({ name: 'filterTasks', pure: false })   // ⚠️ викликається на КОЖНІЙ перевірці змін

Пайп чи метод у шаблоні