Angular 11 Search Filter Pipe with NG2 Search Filter Tutorial

Angular 11 search filter pipe example, this step by step article will explain how to create an angular search pipe filter with the help of ng2-search-filter library from scratch.

Search filter are useful in finding the desired results in a large dataset. A user types some text, and the result manifests on the screen based on matched input. In this comprehensive guide, you will learn to effortlessly create the search pipe and later implement the search filter in the angular app.

Angular pipe filter example will be explained in this article. We will create a custom search using a pipe to filter table data dynamically using the user name. Consequently, without further ado, lest start seeing how to create a custom search in Angular 11 with third-party search filter plugin and angular pipe filter.

Angular 11 Search Filter Example

  • Step 1: Configure Angular Environment
  • Step 2: Install Search Filter Plugin
  • Step 3: Register Ng2SearchPipeModule
  • Step 4: Create Search Filter in Angular
  • Step 5: Test Application

Configure Angular Environment

Before creating an angular app, you must install angular CLI:

npm install -g @angular/cli

Create the new angular app with recommended command:

ng new angular-demo

Head over to app’s root:

ng new angular-demo

Install Search Filter Plugin

This is the quintessential step so install the third party search filter package with npm command:

npm install ng2-search-filter

Register Ng2SearchPipeModule in App Module

Import Ng2SearchPipeModule and FormsModule simultaneously at the top additionally register both the modules in imports array in 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 { Ng2SearchPipeModule } from 'ng2-search-filter';
import { FormsModule } from '@angular/forms';



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

export class AppModule { }

Create Search Filter in Angular

Angular filter pipe picks a subset of items from an array hence add the filter pipe in the table along with ngFor directive, also run the for loop directive to iterate over the Users list.

Update below code in app.component.html:

<div class="form-group">
  <input type="text" class="form-control" placeholder="Type to search" [(ngModel)]="data">
</div>

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of Users | filter:data">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.email}}</td>
    </tr>
  </tbody>
</table>

Go ahead and open the app.component.ts and update the suggested code:

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

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

export class AppComponent {

  data: string;

  Users = [{
      "id": 5440,
      "name": "Wanda Lynch",
      "email": "[email protected]"
    },
    {
      "id": 6228,
      "name": "Katrina Graves",
      "email": "[email protected]"
    },
    {
      "id": 1654,
      "name": "Louis Daniels",
      "email": "[email protected]"
    },
    {
      "id": 1631,
      "name": "Gavin Sullivan",
      "email": "[email protected]"
    },
    {
      "id": 9880,
      "name": "June Martinez",
      "email": "[email protected]"
    },
    {
      "id": 8634,
      "name": "Owen Davis",
      "email": "[email protected]"
    },
    {
      "id": 3918,
      "name": "Megan Harrison",
      "email": "[email protected]"
    },
    {
      "id": 3680,
      "name": "Joel Thompson",
      "email": "[email protected]"
    },
    {
      "id": 2409,
      "name": "Dora Rose",
      "email": "[email protected]"
    },
    {
      "id": 4477,
      "name": "Candice Neal",
      "email": "[email protected]"
    }
  ]
  
}

We added the Users array and added some dummy data into it.

Start Application

Eventually, open console execute the suggested command to start the development server:

ng serve

Run the app using the given below url:

http://localhost:4200

Conclusion

This guide helped us comprehend how to quickly create a search filter pipe in angular using the ng2 search filter pipe; I reckon it must have helped you understand the concepts of creating this primary feature.