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.

Leave a Comment

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

istanbul escortHacklinkartvin escortGiresun escortEscortporno izleizmir escortsincan escortistanbul escortizmir escortGaziantep escortşişli escortkartal escortbodrum escortAntalya escortMarmaris escortpornoankara escortistanbul escorthttps://escortcity.net/Ankara çilingironwin girişHacklink satın alçankaya escortAyvalık Escortkütahya escortgümüşhane escortAksaray escortaydın escortkayseri escortçankaya escortkızılay escortkeçiören escorthepabeteryaman escortKiralık Bahis Siteleribonus veren sitelerKiralık Bahis SiteleriKiralık Bahis SayfasıAviator oynaCasinoslotdiyarbet girişgates of olympus oynasugar rush oynaSweet bonanza demowild west gold demo oynabodrum escortbodrum escortçeşme escortbig bass bonanza oynaredbullholdenracing.comCasinoslot
Diş eti ağrısıankara kocaeli nakliyatgüvenlik bariyerisakarya evden eve nakliyatgaziantep evden eve nakliyatnargilehttps://www.orneknakliyat.comseowordpress en iyi seo eklentileripuro satın alizmir saç ekimiistanbul evden eve nakliyatimplantbebekeskişehir inşaat şirketleriantika eşya alanlarantika eşya alanlarantalya haberpgcdpmsagaziantep boşanma avukatıAntika alan yerlermaltepe antika eşya alanlarGaziantep Evden Eve TaşımacılıkGaziantep Halı Yıkamaizmir escortetiler antika eşya alanlaretiler antika eşya alanlarantika alanlarAccident LawyerDental Implantiqoseskişehir pelet kazanı