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

 

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:

// 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 './search.page';
import { RouterModule } from '@angular/router';

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Ng2SearchPipeModule,
    RouterModule.forChild([
      {
        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';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
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:

<!-- search.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Search</ion-title>
  </ion-toolbar>
</ion-header>

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

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

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

</ion-content>

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