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:

$ npm i ng2-search-filter --save



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:

// search.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { SearchPage } from './';
import { RouterModule } from '@angular/router';

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

  imports: [
        path: '',
        component: SearchPage
  declarations: [SearchPage]
export class SearchPageModule {}

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.

// search.module.ts
import { Component, OnInit } from '@angular/core';

  selector: 'app-search',
  templateUrl: './',
  styleUrls: ['./'],
export class SearchPage implements OnInit {
  term = '';
  filterData = [
      firstName: 'Celestine',
      lastName: 'Schimmel',
      address: '7687 Jadon Port'
      firstName: 'Johan',
      lastName: 'Ziemann PhD',
      address: '156 Streich Ports'
      firstName: 'Lizzie',
      lastName: 'Schumm',
      address: '5203 Jordon Center'
      firstName: 'Gavin',
      lastName: 'Leannon',
      address: '91057 Davion Club'
      firstName: 'Lucious',
      lastName: 'Leuschke',
      address: '16288 Reichel Harbor'

  constructor() { }

  ngOnInit() {


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

<!-- -->
    <ion-title>Ionic Search</ion-title>

<ion-content class="ion-padding">

  <!-- Search Bar -->
  <ion-searchbar placeholder="Filter Schedules" [(ngModel)]="term" animated="true"></ion-searchbar>

  <!-- List Items -->
    <ion-item *ngFor="let item of filterData | filter:term">
      <ion-label>{{item.firstName}} {{item.lastName}}</ion-label>


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

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *