> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/pipes.md).

# Pipes

## Робота з pipes

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

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code overflow="wrap" %}

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

{% endcode %}

### &#x20;**Дефолтні pips в Angular**

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

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

### &#x20;**Параметри в pipes**

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

### &#x20;**Форматування дати**

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

### **Ланцюжки pipes**

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}