Search

Pipe

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

@Pipe({
  name: 'filter',
  standalone: true,
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) {
      return [];
    }
    if (!searchText) {
      return items;
    }
    searchText = searchText.toLowerCase();

    return items.filter((it) => {
      return it.title.toLowerCase().includes(searchText);
    });
  }
}

Component

imports: [FilterPipe],

Template

<form [formGroup]="form">
  <input type="text" [formControl]="control" placeholder="Search ..." id="searchField" class="form-control" />
</form>

<div class="card" *ngFor="let item of (items$ | async) || [] | filter : control.value">
  <img class="card-img-top" [src]="item.image" [alt]="item.title" />
  <h4 class="card-header">{{ item.title }}</h4>
</div>