Angular Ionic Firestore: Filter / Search

Question

I am looking to filter my results set based on an input at the top of the page.

Homepage Markup

  <ion-searchbar [(ngModel)]="query"></ion-searchbar>

  <ion-card *ngFor="let note of noteList | search:'distillery':query | async" routerLink="/detail/{{note.id}}">

Homepage TS

  import { Observable } from 'rxjs';
  import { Router } from '@angular/router'; 
  import { Note } from '../models/note.interface';
  import { FirestoreService } from '../services/data/firestore.service';
  import { Component, Pipe, PipeTransform } from '@angular/core';

  @Pipe({
    name: 'search'
  })
  export class SearchPipe implements PipeTransform {
    public transform(value, keys: string, term: string) {  
      if (!term) return value;
      return (value || []).filter(note => keys.split(',').some(key => note.hasOwnProperty(key) && new RegExp(term, 'gi').test(note[key])));

    }
  }

  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {

    public noteList;
    constructor(
      private firestoreService: FirestoreService,
      private router: Router
    ) {}

    ngOnInit() {
      this.noteList = this.firestoreService.getNoteList().valueChanges();
    }
  }

The error I am getting in the console is...

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'search' could not be found ("
  <ion-searchbar [(ngModel)]="query"></ion-searchbar>

  <ion-card *ngFor="let [ERROR ->]note of noteList | search:'distillery':query | async" routerLink="/detail/{{note.id}}">
    <ion-card"): ng:///HomePageModule/HomePage.html@15:24

Answer 1

You need to inject the SearchPipe into your component HomePage that tries to use it. You do this in the constructor of your component.

constructor(
  private firestoreService: FirestoreService,
  private router: Router,
  private search: SearchPipe
) {}