Creating a Custom Search Filter Pipe for Data Tables in Angular

Creating an effective search filter for data tables in Angular can significantly enhance user experience by enabling quick and precise data retrieval. In this article, we will explore how to create a custom search filter pipe that allows users to filter table data dynamically.

Understanding Pipes in Angular

In Angular, pipes are a way to transform data before it is displayed in the view. Built-in pipes include date, currency, and percent, but you can also create custom pipes to suit specific needs, such as filtering data in a table.

Follow these steps to create a custom search filter pipe:

Generate a new pipe using Angular CLI:

ng generate pipe searchFilter

Implement the filtering logic inside the pipe class.
Use the pipe in your component template to filter data based on user input.

Implementing the Pipe Logic

Open the generated search-filter.pipe.ts file and modify it as follows:

TypeScript code:

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

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if (!items || !searchText) {
      return items;
    }
    searchText = searchText.toLowerCase();
    return items.filter(item => {
      return Object.values(item).some(value =>
        String(value).toLowerCase().includes(searchText)
      );
    });
  }
}

Using the Pipe in a Component

In your component template, bind the search input to a variable and apply the pipe to your data array:

HTML template example:

<input type="text" [(ngModel)]="searchText" placeholder="Search...">

<table>
  <tr *ngFor="let item of data | searchFilter:searchText">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
    <td>{{ item.city }}</td>
  </tr>
</table>

Ensure you have imported FormsModule in your module to use ngModel.

Creating a custom pipe offers several advantages:

Reusable across multiple components.
Encapsulates filtering logic for cleaner code.
Easy to extend for more complex filtering needs.

Conclusion

Building a custom search filter pipe in Angular empowers developers to create more interactive and user-friendly data tables. By following this guide, you can implement efficient filtering mechanisms tailored to your application’s requirements.

Creating a Custom Search Filter Pipe for Data Tables in Angular

Table of Contents

Understanding Pipes in Angular