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.
Leave a Reply