Search code examples
javascriptangulartypescriptangular5angular-pipe

Angular Pipe for search field


I have a pipe which filters the search field, and displays the list of items according to search text. Currently, it filters only companyDisplay. Goal is to filter companyCode and companyDisplay

JSON

[{
    companyDisplay: "ABC",
    companyName: "EFG",
    companyCode: "1234"
}]

Search Pipe

import { Pipe, PipeTransform } from '@angular/core'; // serach text sorting
@Pipe({
    name: 'searchCompanyPipe'
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], searchText: any): any[] {
    if (!items) { return []; }
    if (!searchText) { return items; }
    searchText = searchText.toLowerCase();
    return items.filter(i => {
      return (i.companyDisplay || i.companyCode).toLowerCase().includes(searchText);
    });
  }
}

HTML

<li *ngFor="let data of companyInfo| searchPipe:searchValue">

companyInfo holds the json.


Solution

  • The problem here is that the following code:

    (i.companyDisplay || i.companyCode)
    

    always returns companyDisplay as long as it is not a falsy value. You need to use something like:

    return i.companyDisplay.toLowerCase().includes(searchText) || i.companyCode.toLowerCase().includes(searchText);