How to Build List Filtering and Searching in Ionic 5

Last updated on by Digamber

This tutorial explains how to create a search filter in Ionic 5 Angular application, and we can search and filter data list using the Ionic 5 search filter.

Showing a data or records list is a usual practice for web developers. In this tutorial, we will see how to implement the search and list filtering feature in an Ionic 5 mobile application. Also, we will build an Ionic app on the Angular platform to amplify the Ionic 5 search performance.

In the previous tutorial, we talked about creating a search filter in Angular. You must check out this tutorial if you are an Angular lover.

To smoothen our work, we are using a third-party plugin ng2-search-filter. This plugin comes with robust features and offers a filter pipe which can be associated with Angular’s *ngFor directive to add the search filter functionality.

Create Ionic 5 Application

Before we begin make sure you have Ionic CLI installed.

npm install -g @ionic/cli

So, open your command prompt and execute the following command:

Next, install a new Ionic Angular application:

ionic start ionic-search-filter-example blank --type=angular

Navigate to project root:

cd ionic-search-filter-example=angular

Install ng2-search-filter Plugin in Ionic

Navigate to your terminal or command prompt and execute the following command to install the ng2-search-filter library:

npm i ng2-search-filter

Add Ng2SearchPipeModule Module

We need to register the Ng2SearchPipeModule in Ionic; we are using the default Home page to create a search filter; however, you can create your own page.

Head over to home.module.ts file and import the Ng2SearchPipeModule from ‘ng2-search-filter’, Also inject the search module in imports array.

// 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,
    HomePageRoutingModule,
    Ng2SearchPipeModule
  ],
  declarations: [HomePage]
})

export class HomePageModule {}

Create List with Searching and Filtering

Next, we will move to the essential step here, and we will build a list. And also, add the searching and filtering functionality in it.

We need to define some random dummy data, we will search and filter this data object.

Add the following code in home.page.ts file:

// home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  
  filterTerm: string;

  constructor() { }

  userRecords = [{
      "id": 1,
      "name": "Leanne Graham",
      "email": "Sincere@april.biz"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "email": "Shanna@melissa.tv"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "email": "Nathan@yesenia.net"
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "email": "Julianne.OConner@kory.org"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "email": "Lucio_Hettinger@annie.ca"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "email": "Karley_Dach@jasper.info"
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "email": "Telly.Hoeger@billy.biz"
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "email": "Sherwood@rosamond.me"
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "email": "Chaim_McDermott@dana.io"
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "email": "Rey.Padberg@karina.biz"
    }
  ]

}

Let us create a Ionic template with search bar, So place the given below code in home.page.html file:

// home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Search Filter Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-searchbar placeholder="Search..." [(ngModel)]="filterTerm" animated="true"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let data of userRecords | filter:filterTerm">
      <ion-label>{{data.id}}</ion-label>
      <ion-label>{{data.name}}</ion-label>
      <ion-label>{{data.email}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Run Ionic Application

To start the application in the browser, kindly execute the following command from command prompt:

ionic serve --lab

Here is the final output:

How to Build List Filtering and Searching in Ionic 5

The Bottom Line

Finally, we have seen the nitty-gritty that are very important to thrive your knowledge to build list filtering and searching in Ionic 5 application. I hope you will like this tutorial and share it with others too.