IONIC 6 ANGULAR FILTERING LIST USING NG2-SEARCH-FILTER

In this tutorial, we will learn how to create a search filter using an ng2-search-filter package and pipe filter in Ionic Angular application to filter the data records using the ngFor loop directive.

It is a little tedious to visualise the large collection of tabular data. We browse through an infinite amount of info in our daily lives.

But what if I offered a final solution that may make it incredibly simple to comprehend tabular items? Without exerting much effort, we can construct the search filter that allows data to be filtered.

To establish a search filter, we are utilizing a pipe filter, which is essentially a built-in functionality of ng2-search-filter. We will utilize the ng2-search-filter plugin on this tutorial.

This plugin makes it simple to build a personalized search in Ionic Angular application.

We’ll start by building a simple Ionic Angular app from scratch, add the search function, and perform a data set search.

HOW TO CREATE A SEARCH FILTER

• Step 1 : Create new Ionic Angular Project
• Step 2 : Install ng2-search-filter Package
• Step 3 : Import the package module
• Step 4 : Implementing the search filter

CREATE NEW IONIC PROJECT

Let us full fill the first requirement that is to install the latest version of Ionic CLI.

npm install -g @ionic/cli

Use command to create the Ionic Angular app:

ionic start filter-example blank --type=angular 

Get into the project root directory:

cd filter-example

INSTALL NG2-SEARCH-FILTER PACKAGE

We must now install ng2-search-filter, which is the main plugin.

Put the following command into action:

npm i ng2-search-filter --save

You can find its documentation here.

IMPORT THE PACKAGE MODULE

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

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

//home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { Ng2SearchPipeModule } from 'ng2-search-filter';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Ng2SearchPipeModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

IMPLEMENTING THE SEARCH FILTER

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

// home.page.ts
import { Component } from '@angular/core';

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

}

The home page template will have Ionic Search Bar component and list of data:

<!-- home.page.html -->
<ion-content [fullscreen]="true">
    <ion-header>
        <ion-toolbar>
            <ion-title size="large">Ionic Search Filter Example</ion-title>
        </ion-toolbar>
    </ion-header>

    <!-- Search bar -->
    <ion-searchbar placeholder="Filter Data" [(ngModel)]="term"></ion-searchbar>

    <!-- List Data -->
    <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 in the ngFor using the ngModel from the search bar.

View this tutorial process in the video :