Create Search Filter Pipe in Angular 10 with ng2-search-filter

Last updated on by Digamber

This is a comprehensive Angular 10 Search Filter tutorial. This tutorial will help you learn how to create a search filter using an ng2-search-filter package and pipe filter in Angular application to filter the data records using the ngFor loop directive.

Visualizing the broad set of tabular data is a bit tedious. In our day-to-day life, we scan through an unlimited amount of data.

But what if i share an ultimate solution that can make the reading of tabular items very easy. We can implement the search filter through which data can be filtered without putting many efforts.

We are using a pipe filter to create a search filter; basically pipe filter is a default feature of ng2-search-filter. In this voyage, we are going to use the ng2-search-filter plugin. This plugin is easy to implement and helps us create a custom search in Angular 10.

We will create a basic angular app from scratch, add the search feature, and search through a data set.

Create Angular Application

Angular CLI is a must-have tool, angular applications built on this platform. So to install Angular CLI run the following command:

npm install -g @angular/cli

Check the Angular CLI version with the following command:

ng version

We are building a search filter tutorial on Angular 10. However, it is backward compatible and smoothly works on Angular 10|9|8|7|5.

Adding a search filter starts with creating a new angular application. If you have already done with this process, then skip it. Otherwise, execute the following command to start with the installation:

ng new angular-search-filter-example

Navigate to the project root:

cd angular-search-filter-example

Install ng2-search-filter Package

Now, we need to install the primary plugin, which is ng2-search-filter.

Execute the given below command:

npm i ng2-search-filter

You can find its documentation here.

Add Ng2SearchPipeModule & FormsModule in App Module

The Ng2SearchPipeModule should be imported app module and registered into the imports array. It allows us to filter the data in angular.

Whereas, we need FormsModule to work with form input value.

Place the following code 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 { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';


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

export class AppModule { }

Implementing Search Filter in Angular Component

This is the final step; subsequently, we have to integrate the search filter in an angular component. This is pretty easy and a no-brainer.

We need to create some fake records which we can loop over this data using *ngFor directive and search through using ng2-search-filter. However, if you want, you can call the data or records using the HTTP GET request.

Place the following code in app.component.ts file:

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

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

  filterTerm: string;

  userRecords = [{
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "Sincere@april.biz"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "email": "Shanna@melissa.tv"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "username": "Samantha",
      "email": "Nathan@yesenia.net"
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "username": "Karianne",
      "email": "Julianne.OConner@kory.org"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "username": "Kamren",
      "email": "Lucio_Hettinger@annie.ca"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "username": "Leopoldo_Corkery",
      "email": "Karley_Dach@jasper.info"
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "username": "Elwyn.Skiles",
      "email": "Telly.Hoeger@billy.biz"
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "username": "Maxime_Nienow",
      "email": "Sherwood@rosamond.me"
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "username": "Delphine",
      "email": "Chaim_McDermott@dana.io"
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "username": "Moriah.Stanton",
      "email": "Rey.Padberg@karina.biz"
    }
  ]
}

Place the HTML Input bind filterTerm with ngModel, create an HTML table that we build using Bootstrap.

Add the code in app.component.html file:

<div class="container mt-5">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="filterTerm">
  </div>

  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of userRecords | filter:filterTerm">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.email}}</td>
      </tr>
    </tbody>
  </table>
</div>

Start the application and check the angular search filter in action.

ng serve --open

Here is the output you will see in the browser:

Create Search Filter Pipe in Angular with ng2-search-filter

The Bottom Line

Ultimately, we have completed this tutorial. In this tutorial, we learned how to work with pipe filter with a third-party plugin.