Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

<input #input placeholder="Search" id="search">
<div class="item" *ngFor="let item of data | searchPipe: input.value">
  {{item}}
Pipe code:
@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 causes the error?
Since the incoming data was null and the filter method was expecting data, thus, this caused the error.
Here's a working implementation:
transform(items: any[], filterQuery: any): any[] {
  if (!filterQuery) return items;
  return items.filter(item => item.whateverProperty.toLowerCase().includes(filterQuery.toLowerCase()));
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 
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.