Angular 7/8/9 | Search Pipe Filter using ng2-search-filter Quick Example Tutorial

Sometimes we may have a long list of items or data in tabular form which is added on the component for users. In that case, adding a simple filter search bar can prove a boon for a user to filter the required set of information.

The ng2-search-filter package provides a ready to use pipe filter to add search functionality nearly to any type of object data.

This package is very easy to use and implement.

Here we will look into the steps required to install the ng2-search-filter package and usage tutorial with some more tricks and tips.

Let’s get started!

Create a new Angular Project

Here we will create a new project to learn implementation from scratch, but if you already have a project just skip this step.

Run the following command in the terminal to create a new project using the Ng CLI tool. The current version is 8.2.3

 

Install the ng2-search-filter

Now run following command to install the ng2-search-filter package:

 

Update App Module

After installation, we need to import the package and add in import array to provide it for our application.

In the app.module.ts file import the Ng2SearchPipeModule then add imports array:

 

Usage of Ng2-search-filter in Component

This is the easiest step to do 😛 . In the component class we will add a dummy data object as shown below:

Now in component template HTML we will add an Input control using which a user can filter the data from above object in a tabular form. The data will be iterated using a ngFor directive as shown below:

In the above code, on the input we have a model [(ngModel)]="term"  which is provided as a filter in the ngFor directive as a pipe filter

*ngFor="let item of filterData | filter:term"
That’s it now you have a working filter on your table data set 🙂

 

 

Leave a Reply

avatar
  Subscribe  
Notify of