Search Filter Pipe in Angular

In this article, we’ll learn how to create a search filter pipe in Angular. For that, we used the “ng2-search-filter” module. Let’s create a new project to implement a search filter pipe in angular for that you need to run the following command to create a project.


ng new seachfilter-demo

“seachfilter-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd seachfilter-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the ng2-search-filter npm package in our application. run below command to install.


npm i ng2-search-filter

Ng2SearchPipeModule need to imported app module and registered in “app.module.ts” file.


import { Ng2SearchPipeModule } from 'ng2-search-filter';
@NgModule({
imports:[ 
..., 
Ng2SearchPipeModule   
],
....
})

After adding module you can use in our component. Let’s add below code in our app.component.ts file.


import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  filterTerm: string;

  userRecords = [
    {
      id: 1,
      name: "Alex",
      username: "Bret",
      email: "swwhwh@dhdh.jf"
    },
    {
      id: 2,
      name: "Life Racer",
      username: "Antonette",
      email: "sjsj@ejje.iu"
    },
    {
      id: 3,
      name: "Tacklebox",
      username: "Samantha",
      email: "note@neowo.net"
    },
    {
      id: 4,
      name: "Rose",
      username: "rosy",
      email: "rosey@myobj.org"
    },
    {
      id: 5,
      name: "clash studio",
      username: "studio",
      email: "studio@abc.com"
    },
    {
      id: 6,
      name: "Sand Kitty",
      username: "jimsandkittys",
      email: "Kitty@twuw.info"
    },
    {
      id: 7,
      name: "Sky",
      username: "skyeandstaghorn",
      email: "sky@billy.biz"
    },
    {
      id: 8,
      name: "Flou frouu",
      username: "floufrouu",
      email: "floufrouu@wwqp.co"
    }
  ];
}

below code need to “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>



Output

Below is the full embeded code for the search filter angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 2
  •  
  •