Форматирование дат, чисел и валют

Angular предоставляет мощные средства для локализованного отображения данных через встроенные пайпы: DatePipe, DecimalPipe, CurrencyPipe, PercentPipe.

Форматирование дат

DatePipe позволяет выводить даты в заданном формате:

<p>{{ today | date:'fullDate' }}</p>
<p>{{ today | date:'shortTime' }}</p>
<p>{{ today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
  • fullDate — полная дата с названием дня недели.
  • shortTime — короткое отображение времени.
  • Пользовательский формат 'yyyy-MM-dd HH:mm:ss' позволяет гибко задавать шаблон.

Можно указать локаль при использовании пайпа, что важно для многоязычных приложений:

<p>{{ today | date:'longDate':'':'ru-RU' }}</p>

Форматирование чисел

DecimalPipe используется для форматирования чисел с учётом разделителей разрядов и десятичных знаков:

<p>{{ 12345.6789 | number:'1.2-2' }}</p>
  • Первый параметр 1 — минимальное количество цифр перед десятичной точкой.
  • Второй 2 — минимальное количество цифр после точки.
  • Третий 2 — максимальное количество цифр после точки.

Результат зависит от локали, что позволяет корректно отображать числа для разных стран.

Форматирование валют

CurrencyPipe предназначен для отображения денежных значений:

<p>{{ 1234.5 | currency:'USD':'symbol':'1.2-2':'en-US' }}</p>
<p>{{ 1234.5 | currency:'EUR':'code':'1.2-2':'de-DE' }}</p>
  • ‘USD’, ‘EUR’ — код валюты.
  • ‘symbol’ — отображение символа валюты ($, €).
  • ‘code’ — отображение кода валюты (USD, EUR).
  • Формат числа указывается аналогично DecimalPipe, с учётом локали.

Преимущества использования встроенных пайпов

  • Автоматическая поддержка локализации.
  • Гибкая настройка форматов без необходимости писать собственные функции.
  • Компактный и читаемый синтаксис в шаблонах.

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

Оглавление