Іноді вбудованих пайпів Angular недостатньо. Може виникнути потреба у специфічному перетворенні, яке необхідне саме для вашого застосунку. У такому випадку можна створити власний кастомний пайп.

Наприклад, у вас є список завдань, і кожне завдання може бути виконаним або ні. Щоб візуально виділити виконані завдання, ви хочете автоматично додавати емодзі ✅ до їхніх заголовків. Замість того, щоб прописувати цю логіку у кожному шаблоні, можна створити окремий пайп для цього.

Як створити власний пайп

Щоб згенерувати кастомний пайп в Angular, скористайтеся наступною CLI-командою. Назвемо його formatTitle, оскільки його завдання — форматувати заголовок завдання залежно від статусу виконання:

Ця команда створить два файли:

• format-title.pipe.ts — логіка пайпа;

• format-title.pipe.spec.ts — файл модульних тестів (можна видалити, якщо тестування наразі не потрібне).

Коли Angular створює пайп, він виглядає приблизно так:

Ось що робить цей код:

• Клас FormatTitlePipe реалізує інтерфейс PipeTransform, що гарантує наявність методу transform у пайпі;

• Метод transform приймає значення (вхідні дані) та необов'язкові аргументи й повертає перетворений результат. На цьому етапі він просто повертає вхідне значення без змін;

• Ім'я пайпа (formatTitle) визначається у декораторі @Pipe — саме цю назву буде використано в шаблоні.

Зараз пайп існує, але ще не виконує жодної логіки. Далі додамо необхідну функціональність.

Реалізація власного пайпу

Необхідно додати емодзі ✅ до заголовка залежно від статусу виконання завдання (task.completed). Оновіть пайп для застосування нашої власної логіки форматування:

Метод transform приймає два аргументи:

• value — заголовок завдання;

• completed — булевий параметр, що вказує, чи виконано завдання.

Якщо завдання виконано (true), до кінця заголовка додається емодзі ✅. В іншому випадку повертається незмінений заголовок.

Використання пайпа в шаблоні

Щоб використати пайп у вашому Angular-шаблоні, застосуйте його за допомогою символу пайпа |:

Що тут відбувається:

• task.title — значення, яке передається в пайп;

• formatTitle:task.completed застосовує пайп і передає прапорець completed;

• Заголовок міститиме емодзі ✅ або ні, залежно від статусу завдання.

Використання пайпів таким чином допомагає зберігати шаблони чистими та зрозумілими, а також переносить логіку форматування у багаторазовий, тестований код.