Angular 14 Custom Filter Search Pipe Example Tutorial

Angular custom filter search pipe tutorial, In this tutorial, we will explain how to create a custom filter search pipe in the angular application using angular pipe and Bootstrap.

Pipes are handy and help you format the data before displaying it in the View. Pipe are declared with the help of the | symbol.

This symbol defines the Pipe Operator in angular. Throughout this Angular Search Filter tutorial, you will use the pipe symbol to filter the data.

Bootstrap is a robust front-end framework applied to build modern web and mobile applications. It reduces the pain of writing code from scratch for HTML and CSS, most importantly open-source.

Thus, we will use Bootstrap UI in this comprehensive angular search filter example.

Angular 14 Custom Filter Search Pipe Example

  • Create Angular Project
  • Generate Custom Pipe
  • Create Custom Filter Search Pipe
  • Add Search Filter in AppModule
  • Add Dummy Data
  • Implement Filter Search with Custom Pipe
  • Run Angular Application

Create Angular Project

Angular CLI is a command-line interface tool recommended to initialize, develop likewise scaffold the angular application.

npm install -g @angular/cli

Further, use the following command to start installing the new angular app:

ng new ng-form-validaiton

Next, get into the project root:

cd ng-form-validaiton

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Generate Custom Pipe in Angular

Open the terminal, use the below command to generate the custom search filter pipe:

ng generate pipe search-filter

Create Custom Filter Search Pipe

The above command manifested the two files inside the app/ directory, hence open search-filter.pipe.ts file on top of that append the following code:

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

@Pipe({
  name: 'searchFilter'
})

export class SearchFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
      if(!value)return null;
      if(!args)return value;

      args = args.toLowerCase();

      return value.filter(function(data){
          return JSON.stringify(data).toLowerCase().includes(args);
      });
  }

}

Register Search Filter in AppModule

In the subsequent step, you have to add search filter, and register within the @NgModule’s declarations array. Thereupon, open and update the app.module.ts file:

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

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

import { FormsModule } from '@angular/forms';
import { SearchFilterPipe } from './search-filter.pipe';

@NgModule({
  declarations: [
    AppComponent,
    SearchFilterPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Add Dummy Data

Open app.component.ts file, similarly define the Students array on top of that add the student’s test data.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public searchFilter: any = '';

  constructor(){}

  Students = [{
      "id": 1,
      "name": "Nathaniel Graham",
      "email": "nathaniel.graham@example.com"
    },
    {
      "id": 2,
      "name": "Avery Adams",
      "email": "avery.adams@example.com"
    },
    {
      "id": 3,
      "name": "Mario Stevens",
      "email": "mario.stevens@example.com"
    },
    {
      "id": 4,
      "name": "Constance Beck",
      "email": "constance.beck@example.com"
    },
    {
      "id": 5,
      "name": "Jimmie Little",
      "email": "jimmie.little@example.com"
    },
    {
      "id": 6,
      "name": "Avery Matthews",
      "email": "avery.matthews@example.com"
    },
    {
      "id": 7,
      "name": "Pat Sutton",
      "email": "pat.sutton@example.com"
    },
    {
      "id": 8,
      "name": "Danny Crawford",
      "email": "danny.crawford@example.com"
    },
    {
      "id": 9,
      "name": "Pearl Mccoy",
      "email": "pearl.mccoy@example.com"
    },
    {
      "id": 10,
      "name": "Flenn Wallace",
      "email": "flenn.wallace@example.com"
    }
  ]

}

Implement Filter Search with Custom Pipe

In this step, you will implement the angular custom pipe and filter the data. Hence, open and update the app.component.html file.

<div class="container mt-5" style="max-width: 550px;">

  <div class="form-group">
    <input type="text" class="form-control mb-4" placeholder="Search" [(ngModel)]="query" id="listSearch">
  </div>

  <div class="card mb-1" *ngFor="let data of Students | searchFilter: query">
    <div class="card-body">
      <h5 class="card-title">{{data.name}}</h5>
      <h6 class="card-subtitle mb-2 text-muted">{{data.name}}</h6>
      <p class="card-text">{{data.email}}</p>
    </div>
  </div>

</div>

Run Angular Application

In addition to to test the application, Consequently execute the following command to start the angular development server:

ng serve

Add the following url in the browser, and execute the below command:

http://localhost:4200

Custom Filter Search Pipe in Angular

Conclusion

We have created a custom search pipe to filter results in Angular dynamically.

This step-by-step guide explained everything about creating a custom search filter pipe in the angular app using angular pipe and Bootstrap framework.