Ionic 6 Angular Dynamic List with Search Filter Pipe Tutorial

Ionic Angular list with search filter pipe tutorial; In this quick and simple tutorial, we will explain how to build a dynamic list with list searching functionality with search filter Pipe in Ionic Angular application using npm ng2-search-filter package.

Furthermore, we will also explain how to make HTTP request in Ionic Angular to fetch the data dynamically with HttpClient API and RxJS observable.

The ng2-search-filter is a powerful package created on the Angular 2 filter paradigm for creating a custom search for filtering data in a list data.

We will create a simple list using the third-party API, which will load the users list dynamically using the HttpClient API.

We will install and add the ng2 search filter library to filter and search the list of users data in the Ionic application.

How to Build Dynamic List with Search Filter Pipe in Ionic

  • Step 1: Set Up Ionic Angular Environment
  • Step 2: Install Search Filter Pacakage
  • Step 3: Update Ng2SearchPipeModule in Home Module
  • Step 4: Add HttpClientModule in Main Module
  • Step 5: Implement List with Search Pipe
  • Step 6: Test Ionic Application

Set Up Ionic Angular Environment

Let us commence with installing the Ionic CLI tool on your system.

npm install -g @ionic/cli

Next, type the command on the console to install the Ionic Angular application:

ionic start ionic-list-example blank --type=angular

Get into the to app folder:

cd ionic-list-example

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Search Filter Pacakage

In this step, you require to type the recommended command on the terminal and install the ng2-search-filter into the Ionic project.

npm i ng2-search-filter

Update Ng2SearchPipeModule in Home Module

You have to import Ng2SearchPipeModule from the ‘ng2-search-filter’ package; similarly, add this module inside the imports array.

Open and insert the given below code in the home.module.ts file:

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';

// Imort search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';

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

export class HomePageModule {}

Add HttpClientModule in Main Module

Again, import HttpClientModule from the ‘@angular/common/http’ package; it will let you make the HTTP Get call and fetch the data dynamically from the remote server.

Open and insert the given below code in the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// Import HTTP module
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

export class AppModule {}

Implement Ionic List with Search Filter Pipe

We are ready to create a list; we will make the HTTP Get request to get the users with REST API, import Observable, of, catcherror, tap, and HttpClient modules, Create a Users Interface class. These ingredients help to get the users data from the server, which we will use to create the users list dynamically.

Add the given below code in the home.page.ts file:

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

export class Users {
  id: string;
  name: string;
  username: string;
  email: number;
}

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

export class HomePage {
  
  Filter: string;
  Users:any = [];

  constructor(private httpClient: HttpClient) { 
    this.getUsers().subscribe(res => {
      console.log(res)
      this.Users = res;
    });
  }

 
  getUsers(): Observable<Users[]> {
    return this.httpClient.get<Users[]>('https://jsonplaceholder.typicode.com/users/')
      .pipe(
        tap(User => console.log('Users list received!')),
        catchError(this.handleError<Users[]>('Get User', []))
      );
  }


  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      console.log(`${operation} failed: ${error.message}`);
      return of(result as T);
    };
  } 


}

Use ngFor directive to iterate over the Users list, and add the filter to integrate the search filtering the list.

Update the given below code in the home.page.html file:

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

<ion-content [fullscreen]="true">

  <ion-searchbar placeholder="Search" [(ngModel)]="Filter" animated="true"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let user of Users | filter:Filter">
      <ion-label>{{user.id}}</ion-label>
      <ion-label>{{user.name}}</ion-label>
      <ion-label>{{user.username}}</ion-label>
      <ion-label>{{user.email}}</ion-label>
    </ion-item>
  </ion-list>

</ion-content>

Test Ionic Application

Testing an Ionic project is extremely easy, given below are instructions that can allow you to add platforms, create a build and start the app on the preferred device:

Execute command to add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Next, again execute one of the commands to create the build.

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Lastly, run any given command to run the application on a real device or simulator; and yes, you can test or debug the app on the chrome browser:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Search Filter List in Ionic

Conclusion

The Ionic search list filter example is done for now; in this tutorial, we have seen how to implement search functionality in the list using the pipe filter.

However, it was just the basic functionality you can try more if you have an advanced requirement.

I hope this guide will help you; if you found this guide helpful, share it with others.