Часто виникає потреба відображати дані у зрозумілому та привабливому вигляді. Це може включати форматування імен, дат, цін, відсотків або елементів списку.

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

Що таке пайпи?

Уявіть пайп як інструмент, який приймає необроблені дані, обробляє їх і повертає змінену версію — подібно до фільтра в потоці даних.

Використання пайпів у Angular

Щоразу, коли потрібно відформатувати дані безпосередньо у шаблоні, можна застосувати пайп за допомогою символу | (пайп):

{{ value | pipeName }}

Можна також поєднувати декілька пайпів разом:

{{ value | pipe1 | pipe2 }}

Деякі пайпи також приймають параметри, які передаються за допомогою двокрапок (:):

{{ value | pipeName:param1:param2 }}

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

Перетворення рядків

Припустимо, у вашому компоненті є властивість username. Часто корисно виділити або підкреслити ім'я користувача, відображаючи його великими літерами.

Тут властивість userName отримується з компонента та перетворюється на великі літери за допомогою вбудованого пайпа Angular uppercase. Тож якщо userName = 'alex', на сторінці буде відображено: ALEX.

Форматування дат

Окрім рядків, одним із найпоширеніших типів даних, які потрібно форматувати, є дата.

Уявіть, що у вас є об'єкт user. Потрібно відобразити дату приєднання у зрозумілому, зручному для читання форматі:

Якщо user.dateJoined = new Date(2023, 3, 15), результат буде: Joined on: April 15, 2023.

Пайп date підтримує широкий спектр форматів, таких як short, medium, fullDate, або навіть користувацькі формати на кшталт dd/MM/yyyy.

Відображення валюти

Ви працюєте з об'єктом product. Щоб показати ціну у певній валюті, використовуйте пайп currency:

Якщо product.price = 199.99, результат буде: Price: $199.99.

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

В Angular доступно багато інших корисних пайпів. Хоча всі вони тут не розглядаються, нижче наведено короткий довідник пайпів, які ще не були згадані:

Щоб дізнатися більше про кожен пайп, відвідайте офіційну документацію Angular.