> 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/stvorennya-pipes.md).
# Створення pipes
{% code title="cmd" %}
```
ng g pipe factorial
```
{% endcode %}
{% code title="factorial.pipe.ts" overflow="wrap" lineNumbers="true" %}
```typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'factorial'
})
export class FactorialPipe implements PipeTransform {
transform(value: number, args?: any): number {
if (value <= 0) {
return 0;
}
let result = 1;
for(let i = 1; i <= value; i++) {
result = result * i;
}
return result;
}
}
```
{% endcode %}
{% code title="app.module.ts" overflow="wrap" lineNumbers="true" %}
```typescript
// ...
@NgModule({
// ...
declarations: [
// ...
FactorialPipe
]
})
export class AppModule { }
```
{% endcode %}
{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}
```markup
Факторіал числа {{ x }} дорівнює {{x | factorial}}
```
{% endcode %}
Pipes бувають двох типів: **pure** (що не допускають змін) і **impure** (допускають змін).
{% code title="factorial.pipe.ts" overflow="wrap" lineNumbers="true" %}
```typescript
@Pipe({
name: 'factorial',
pure: false
})
```
{% endcode %}
Різниця між цими двома типами полягає в реагуванні на зміну значень, які передаються в pipe.
За замовчуванням всі pipes є "pure". Такі об'єкти відстежують зміни в значеннях примітивних типів (String, Number, Boolean, Symbol). В інших об'єктах - типів Date, Array, Function, Object зміни відслідковуються, коли змінюється посилання, а не значення за посиланням. Тобто, якщо в масив додали елемент, масив змінився, але посилання змінної, яка представляє даний масив, не змінилася. Тому подібні зміни pure pipes НЕ відстежуватимуть.
Impure pipes відстежують всі зміни. Можливо, виникає питання, навіщо тоді потрібні pure pipes? Справа в тому, що відстеження змін позначається на продуктивності, і тому pure pipes можуть показувати кращу продуктивність. До того ж не завжди необхідно відстежувати зміни в складних об'єктах, іноді це абсолютно не потрібно.
## Завдання
Написати фільтир todo.
* Створити pipe filterTodo
{% code title="cmd" %}
```
ng g pipe shared/pipes/filter-todo/filterTodo
```
{% endcode %}
{% code title="filter-todo.pipe.ts" overflow="wrap" lineNumbers="true" %}
```typescript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterTodo',
pure: false
})
export class FilterTodoPipe implements PipeTransform {
transform(data: Aray, search: string): Aray{
if (!search) {
return data;
}
return data.filter((el: Todo) => {
return el.title.toLowerCase().indexOf(search.toLowerCase()) > -1;
});
}
}
```
{% endcode %}
* Додати поле пошуку, та фільтрувати значення відповідно до введених даних в input.
{% code title="todos.component.html" overflow="wrap" lineNumbers="true" %}
```markup
```
{% endcode %}
{% code title="todos.component.ts" overflow="wrap" lineNumbers="true" %}
```typescript
// ...
export class TodosComponent implements OnInit {
search: string;
// ...
}
```
{% endcode %}
## Самостійна робота.
* Додати пріоритети для todo. Todo може мати один з наступних пріоритетів \[low, medium, high].
* При створенні нового todo ми повинні обов'язково вказувати пріоритет.
* Додати можливість фільтрувати todo по пріоритету.
Приклад дизайну
