0
How to Implement Angular Search Filter in a minute?
A search filter is a needy component for any application. It can be tedious to implement with your current project. In this article, we’re going to implement the Angular Search Filter Pipe using ng2-search-filter.
What we learn today

Install filter library
Run below code in console of Angular:
1 |
npm i ng2-search-filter --save |
Usage
Import Ng2SearchPipeModule
to your module
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // search module import { Ng2SearchPipeModule } from 'ng2-search-filter'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, Ng2SearchPipeModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Use ngModel with your Search box like:
1 |
<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder=" Start searching for a article by id or title or url"> |
And use pipe in your component
1 2 3 4 5 |
<tr *ngFor="let article of articles | filter:searchText"> <td>{{article.id}}</td> <td>{{article.title}}</td> <td><a href="{{blogUrl}}{{article.url}}">{{article.url}}</a></td> </tr> |
Project Demo
Task for you

You have to add result count with filter text just like in above screenshot. Please share your stackblitz code with us in comment area.
Note: Do you have dare to accept the challagne?
0
Summary

Article Name
How to Implement Angular Search Filter in a minute?
Description
A search filter is a needy component for any application. In this article, We're going to implement the Angular Search Filter Pipe using ng2-search-filter.
Author
Das JS
Publisher Name
Das JS
Publisher Logo
