Create Custom Search Filter Pipe in Angular

Introduction

In this article, we will learn how to create a custom search filter pipe in Angular application

Prerequisites

  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap (Optional)

Create an Angular project by using the following command.

ng new angapp

Now install Bootstrap by using the following command.

npm install bootstrap --save

Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';

Create Search Filter Pipe

Now create a custom pipe by using the following command.

ng generate pipe searchfilter

Now open searchfilter.pipe.ts file and add following code.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'searchFilter' })
export class FilterPipe implements PipeTransform {
   transform(value: any, args?: any): any {
    if (!value) return null;
    if (!args) return value;

    args = args.toLowerCase();
    debugger;
    return value.filter(function(item:any) {
      return JSON.stringify(item)
        .toLowerCase()
        .includes(args);
    });
  }
}

Now import this pipe into the app module.Add following code in app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FilterPipe } from './searchfilter.pipe';
import { SearchlistComponent } from './searchlist/searchlist.component';
@NgModule({
  declarations: [
    AppComponent,FilterPipe,SearchlistComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now create a new component by using the following command.

ng g c searchlist

Now open searchlist.component.html file and add the following code.

<div class="container">
    <div class="card">
        <div class="form-group">
            <label for="search-text">Search Text</label>
            <input type="email" class="form-control" id="search-text" aria-describedby="search-text"
                [(ngModel)]="searchText" placeholder="Enter text to search" autofocus>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item" *ngFor="let user of userlist | searchFilter: searchText">
                {{user.firstName}}
            </li>
        </ul>
    </div>
</div>

Now open searchlist.component.ts file and add the following code.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-searchlist',
  templateUrl: './searchlist.component.html',
  styleUrls: ['./searchlist.component.css']
})
export class SearchlistComponent implements OnInit {
  data: any;
  searchText = '';
  userlist: any;
  constructor(private httpclient: HttpClient) {
  }
  ngOnInit(): void {
    this.httpclient.get('https://dummyjson.com/users').subscribe((res: any) => {
      this.data = res
      this.userlist = this.data.users;
      console.log(this.userlist);
    })
  }
}

Now open app.component.html file and add the following code.

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
  <div class="col-sm-12 btn btn-info">
    Create Custom Search filter pipe in Angular Application
  </div>
</div>
<app-searchlist></app-searchlist>

Now run the application using npm start and check the result.

Custom search filter

Now enter some Value into textbox and seach.

Custom search filter

Summary

In this article, we learned how to create a custom search filter pipe in Angular application