Створення pipes

cmd

ng g pipe factorial

factorial.pipe.ts

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;
  }
}

app.module.ts

// ...

@NgModule({
  // ...
  declarations: [
    // ...
    FactorialPipe
  ]
})
export class AppModule { }

app.component.html

<div>Факторіал числа {{ x }} дорівнює {{x | factorial}}</div>

Pipes бувають двох типів: pure (що не допускають змін) і impure (допускають змін).

factorial.pipe.ts

@Pipe({
  name: 'factorial',
  pure: false
})

Різниця між цими двома типами полягає в реагуванні на зміну значень, які передаються в pipe.

За замовчуванням всі pipes є "pure". Такі об'єкти відстежують зміни в значеннях примітивних типів (String, Number, Boolean, Symbol). В інших об'єктах - типів Date, Array, Function, Object зміни відслідковуються, коли змінюється посилання, а не значення за посиланням. Тобто, якщо в масив додали елемент, масив змінився, але посилання змінної, яка представляє даний масив, не змінилася. Тому подібні зміни pure pipes НЕ відстежуватимуть.

Impure pipes відстежують всі зміни. Можливо, виникає питання, навіщо тоді потрібні pure pipes? Справа в тому, що відстеження змін позначається на продуктивності, і тому pure pipes можуть показувати кращу продуктивність. До того ж не завжди необхідно відстежувати зміни в складних об'єктах, іноді це абсолютно не потрібно.

Завдання

Написати фільтир todo.

• Створити pipe filterTodo

cmd

ng g pipe shared/pipes/filter-todo/filterTodo

filter-todo.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterTodo',
  pure: false
})
export class FilterTodoPipe implements PipeTransform {

  transform(data: Aray<Todo>, search: string): Aray<Todo>{
    if (!search) {
      return data;
    }

    return data.filter((el: Todo) => {
      return el.title.toLowerCase().indexOf(search.toLowerCase()) > -1;
    });
  }

}

• Додати поле пошуку, та фільтрувати значення відповідно до введених даних в input.

todos.component.html

<form>
  <div class="form-group">
    <input class="form-control"
           name="search"
           type="text"
           placeholder="Search..."
           [(ngModel)]="search" />
  </div>
</form>

todos.component.ts

// ...
export class TodosComponent implements OnInit {
  search: string;
  
  // ...
}

Самостійна робота.

• Додати пріоритети для todo. Todo може мати один з наступних пріоритетів [low, medium, high].

• При створенні нового todo ми повинні обов'язково вказувати пріоритет.

• Додати можливість фільтрувати todo по пріоритету.

Приклад дизайну