Implement Angular Search Filter in a minute

Table of Contents

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:

npm i ng2-search-filter --save

1	npm i ng2-search-filter --save

See More:

Fetch Large Data in Angular in 3 optimized ways
An overview of the available techniques to render large lists...

Usage

Import Ng2SearchPipeModule to your module

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 { }

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:

<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="&#61442;  Start searching for a article by id or title or url">

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

<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>

<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?