Pipes

Робота з pipes

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

Наприклад, нам потрібно вивести певну дату:

app.component.html

<p>Без форматурования: {{myDate}}</p>
<div>З форматуванням: {{myDate | date}}</div>

app.component.html

// ...
export class AppComponent {
  myDate = new Date(1961, 3, 12);
}

В результаті ми отримаємо:

Без форматурования: Wed Apr 12 1961 00:00:00 GMT+0300 (за східноєвропейським літнім часом)
З форматуванням: Apr 12, 1961

Дефолтні pips в Angular

Назва pipe	Опис
date	форматує дату
currency	форматує валюту
percent	форматує проценти
uppercase	переводить стрічку у верхній регістр
lowercase	переводить стрічку у нижній регістр
decimal	задає формат числа
slice	обрізає стрічку

Приклад використання:

app.component.html

<p>{{'Hello World!' | uppercase}}</p>
<p>{{'Hello World!' | lowercase}}</p>
<p>{{10 | percent}}</p>
<p>{{10 | currency}}</p>

Параметри в pipes

Pipes можуть отримувати параметри. Всі параметри в pipes передаються через двокрапку.

app.component.html

<p>{{'Hello World!' | slice:6:11}}</p>

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

DatePipe як параметр може приймати шаблон дати.

app.component.html

<div>{{myDate | date:"dd/MM/yyyy"}}</div>

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

DecimalPipe як параметр приймає формат числа в вигляді шаблону

app.component.html

<div>{{5.365852 | number:'2.1-2'}}</div>

Форматування валюти

app.component.html

<div>{{money | currency:'USD':'symbol':'1.1-2'}}</div>

Ланцюжки pipes

Цілком можливо, що ми захочемо застосувати відразу кілька pipes до одного значення, тоді ми можемо складати ланцюжки виразів, розділені вертикальною лінією.

app.component.html

<div>{{message | slice:6:11 | uppercase}}</div>