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

Last Updated on March 4, 2024 by Digamber in Angular

Ng2SearchPipeModule is not compatible with Angular Ivy, therefore this tutorial is compatible upto Angular CLI 11.0.4

This is a comprehensive Angular Search Filter tutorial. In this tutorial we will help you learn how to create a search filter using an ng2-search-filter package and pipe filter in Angular.

This guide helps you 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 guide, we are going to use the ng2-search-filter plugin to build the user-friendly search filter with Angular.

This plugin is easy to implement and helps us create a custom search in Angular.

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

Angular 12 Search Filter Example

• Create Angular Application
• Install ng2-search-filter Package
• Import Ng2SearchPipeModule in AppModule
• Implementing Search Filter in Angular Component
• Run Development Server

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. However, it is backward compatible and smoothly works on Angular.

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.

Import Ng2SearchPipeModule & FormsModule in AppModule Class

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 { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 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.scss'],
})

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:

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.