Ionic 4/5 Simple Filter Search Pipe for Lists using ng2-search-filter

A search-filter to any data list or table adds up more value to the usability of the page.

In this article, we will learn how to quickly add a search filter on any type of data which can be a list or table using a special filter package ng2-search-filter for Angular projects.

The ng2-search-filter adds a filter pipe that can be added on any object which we are going to use on listing using *ngFor loopings.

Install ng2-search-filter

To install ng2-search-filter, run following NPM command in a terminal window:

 

Configure

As every page in Ionic 4/5 having its own module so we can just add dependencies in its own module.

For example, we have a Search page, now in the search.module.ts file import the Ng2SearchPipeModule then add in the imports array as shown below:

Adding Search Filter

In the component class, add a static local object of items to show on Search page which we will filter using a search bar.

The search page template will have Ionic Search Bar component and list of items:

In the above code, we just need to add a filter as a pipe with the input model.

Leave a Reply

avatar
  Subscribe  
Notify of