Вы правильно угадали, мы будем использовать кастомную трубу!

Мы собираемся создать функцию поиска, чтобы фильтровать города США по названию.

Итак, все, что вам нужно, это массив данных для фильтрации и поле ввода для захвата пользовательского ввода. В этом примере это список городов, которые нужно отфильтровать по названию.

Шаг 1. Создайте канал с помощью ng g pipe <name>или вручную напишите класс канала и реализуйте PipeTransform интерфейс.

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

Angular вызывает метод transform со значением привязки в качестве первого аргумента и любыми параметрами в качестве второго аргумента в форме списка и возвращает преобразованное значение.

Вышеупомянутый метод преобразования по умолчанию еще ничего не делает. Давайте сделаем волшебство.

Шаг 2. Напишите логику для фильтрации данных.

// value - array of cities
// input - user input in search box
// when there is an input, filter & return all matches
// when there is no input, display all data
// filter() is a javascript method that returns a new array of all values that pass a test defined in the method. You can read more here
transform(value: any, input: any): any {
if (input) {
   return value.filter(val => val.indexOf(input)) >= 0);
 } else {
   return value;
 }
}

Вот и все. Выполнено. 😀

Шутя! нам все еще нужно связать этот канал с шаблоном HTML, чтобы данные передавались.

Шаг 3. Не забудьте включить настраиваемый канал в качестве объявления в модуль приложения:

import { FilterPipe } from './filter/filter.pipe';

Шаг 4: Теперь добавьте пользовательский канал (в этом примере FilterPipe) в свой HTML-шаблон как:

//cityName gets user input that is passed to Pipe transform method mentioned in Step 1
<input type="search" [(ngModel)] = cityName>
<div *ngFor="let city of cities | FilterPipe: cityName">
  {{city}}
</div>

Используйте ngModel для привязки динамического ввода от пользователя к cityName

Вот и все.
В прямом эфире на https://findthycity.herokuapp.com

GitHub: https://github.com/puneetpalkaur/findthycity

Официальный документ по Angular: https://angular.io/guide/pipes