#9 – Пайпы и работа с шаблонами

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

Пайп — это просто функция, которая форматирует значение перед его выводом. Например, если у вас есть дата создания заметки, и вы хотите показать её в читабельном виде, можно написать:
{{ note.createdAt | date:'short' }}
И Angular сам превратит дату в аккуратный формат.

Существуют десятки встроенных пайпов: date, uppercase, lowercase, currency, json и другие. Но вы также можете создавать свои собственные. Это особенно полезно, если нужно, например, обрезать текст, преобразовать значение или наложить условие форматирования.

Создать пайп можно через Angular CLI — это всего одна команда. А дальше вы просто описываете, как должно преобразовываться значение, и используете пайп в шаблоне как любой другой.

Пайпы делают шаблоны чище, а код — понятнее. Вы не захламляете компонент множеством функций для форматирования, а просто управляете отображением данных там, где они и выводятся — в HTML. И это ещё один шаг к чистой архитектуре и удобному фронтенду.