Ionic 4/5 High Performance List Filtering in Ionic & Angular

One of the most common things that a mobile app does is show a list of information, It's also common to add the ability to search and filter these lists. We need to be able to do this in our Ionic apps, and we need to do it in a way that will give us a high level of performance.

In this article, we'll learn how to quickly add a search filter to any list or table of data. We'll show you how to filter list data in an Ionic and Angular app, with a focus on speed and ease of use. Here's a quick look at what we're going to make:

↓

1. Generate a new Ionic Application

Let's start by making a brand-new, blank Ionic app. The application will only have one page, which will show a list and a search bar.

Below command will help you to generate a new Ionic application:

 

ionic start <name> blank --type=angular --spec false

Now we've got everything we need to start with the project, so let's get started.

2. Basic Filtering

We won't be filtering our data through a pipe. Also, we won't deal with it during service. In the home.page.ts file, we will make an array. This array will hold some static data, and we will make a function that we can call to get a subset of that data based on some search criteria.

Update src/app/home/home.page.ts with the following:

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

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

    users: any = [
        {
            username: 'yellowpeacock139',
        },
        {
            username: 'goldenkoala410',
        },
        {
            username: 'smallbird985',
        },
        {
            username: 'brownfish540',
        },
        {
            username: 'bigelephant503',
        },
        {
            username: 'beautifulkoala361',
        },
        {
            username: 'silverelephant404',
        },
        {
            username: 'goldenelephant510',
        },
        {
            username: 'silvergorilla196',
        },
        {
            username: 'biggorilla322',
        },
        {
            username: 'redbear614',
        },
        {
            username: 'yellowduck640',
        },
        {
            username: 'tinybird877',
        },
        {
            username: 'yellowwolf551',
        },
        {
            username: 'tinypanda172',
        },
        {
            username: 'lazysnake906',
        },
        {
            username: 'beautifulbutterfly981',
        },
        {
            username: 'purpleostrich818',
        },
        {
            username: 'ticklishswan854',
        },
        {
            username: 'beautifuldog542',
        },
        {
            username: 'smallleopard952',
        },
        {
            username: 'bluegorilla445',
        },
        {
            username: 'tinyfish204',
        },
        {
            username: 'organicrabbit832',
        },
        {
            username: 'ticklishbird503',
        },
        {
            username: 'heavypeacock986',
        },
        {
            username: 'beautifulduck156',
        },
        {
            username: 'blackduck663',
        },
        {
            username: 'purplefish635',
        },
        {
            username: 'silverlion762',
        },
        {
            username: 'blackbear100',
        },
        {
            username: 'smallswan192',
        },
        {
            username: 'silvermouse222',
        },
        {
            username: 'heavygorilla341',
        },
        {
            username: 'organicduck267',
        },
        {
            username: 'purplepanda581',
        },
        {
            username: 'brownbear342',
        },
        {
            username: 'redduck278',
        },
        {
            username: 'smallcat785',
        },
        {
            username: 'orangeduck243',
        }
    ];
    backupUpUsers: any = [];

    constructor() {
        this.backupUpUsers = this.users;
        console.log(this.users);
    }

    onChange(event) {
        const filteration = event.target.value;
        this.users = this.filterItems(filteration);
        if (filteration.length === 0) {
             this.users = this.backupUpUsers;
        }
    }

    filterItems(searchTerm) {
        console.log(searchTerm);
        return this.backupUpUsers.filter(item => {
            return item.username.toLowerCase()

               .indexOf(searchTerm.toLowerCase()) > -1;
        });
    }

}

 

In the constructor, we set up a member variable called users, which we then fill with an array of data. We also set up a variable called backupUpUsers, whose value is filled with various users. It is our first set of information. Then, we set up a filterItems function that will take a search term as an argument and return an array with only the items that meet the search criteria.

In the code above, we filter the items array by giving the filter a function that only returns true if the searchTerm is in the title string somewhere. Then, we send back that filtered array, which only has items matching the search criteria.

Now that we know how to sort the information, we need to use it. We also have a member variable called backupUpUsers, which will store the filtered array that comes back from the user array. We also have a search term that the user will be able to change. It is sent to the onChange function, which calls the filter function we just made in the provider.

 

We don't call onChange with any search term the first time, so the default data shows up. After that, every time we call onChange(event), it returns an array of data based on the current searchTerm.

Update src/app/home/home.page.html with the following:

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
        <b> Search: </b>
      </ion-label>
      <ion-input
           placeholder="Type to search..."
           (ionChange)="onChange($event)"
      >
      </ion-input>
    </ion-item>
    <ion-item *ngFor="let user of users">
      <ion-label>
        {{ user.username }}
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>

We've added a search bar so the user can choose their search term. We have ionChange set up onChange, so when the user changes the value, we listen for the (ionChange) event to see that the user has changed the search, and we call filterItems() to start filtering the data.

Summary

With the methods in this tutorial, you should be able to create shortlist filtering for almost any situation. When filtering simple lists, you don't always need to use the Observable-based method, but you will see a performance boost when filtering large lists of data.