Unable to read property filter undefined

Question

My template is as follows:

:

    <input #input placeholder="Search" id="search">
    <div class="item" *ngFor="let item of data | searchPipe: input.value">
      {{item}}
    </div>

and I have a component for SearchPipe

@Pipe({
  name: 'searchPipe',
  pure: false
})
export class SearchPipe implements PipeTransform {
  transform(data: any[], searchTerm: string): any[] {
      searchTerm = searchTerm.toUpperCase();
      return data.filter(item => {
        return item.toUpperCase().indexOf(searchTerm) !== -1 
      });
  }
}

what is the problem?

Answer 1

The input was null and the filter method was expecting data, which caused an error.

transform(items: any[], filterQuery: any): any[] {
        if (!filterQuery) return items;
        return items.filter(function(item){
            return item.whateverProperty.toLowerCase().includes(filterQuery.toLowerCase());
        })
    }

Answer 2

Try the following:

export class SearchPipe implements PipeTransform {
  transform(data: any[], searchTerm: string): any[] {
    if(!data) return [];
    searchTerm = searchTerm.toUpperCase();
    return data.filter(item => {
      return item.toUpperCase().indexOf(searchTerm) !== -1 
    });
  }
}