Angular Search

Searching/filtering an object from the list of object using ng2-search-filter.

Steps:

1. Install the required packages

npm install ng2-search-filter --save

2. Import Ng2SearchPipeModule from ng2-search-filter

app.module.ts

// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  ....
  ....

  imports: [
    Ng2SearchPipeModule
  ]
})
export class AppModule { }

3. Create a mock list in app.component.ts file

heroes = [
    { id: 11, name: 'Mr. Nice', country: 'India' },
    { id: 12, name: 'Narco' , country: 'USA'},
    ...
    ...
  ];

4. Let's create a search input field

<input type="text" [(ngModel)]="searchText">

5. Let's apply filter logic on the list

 filter: searchText

will do the magic of searching/filtering the object/element from the list.

So the actual iteration look like:

 <div *ngFor="let hero of heroes | filter: searchText">
        <span>{{hero.id}}</span>
        <span>{{hero.name}}</span>
        <span>{{hero.country}}</span>
 </div>

Demo

https://stackblitz.com/edit/angular-search-filter