In this article we’ll learn how to create a custom search filter pipe in Angular. For implementing follow below steps.
Consider a scenario where we have a table data being displayed to the user list UI. Above table we have a search input field so when type something in search field it will filtered the table data and dynamically render in UI.
So now the question is , how to implement it? It’s quite easy though All we want is a filter that takes an array as input and returns a subset of that array based on the term we supply. In Angular, this way of transforming data to some other form is implemented with Pipes.
Implementing Search Filter
- Create the search filter pipe
search-filter.pipe.ts
searchFilter pipe need to declare in app module and registered in “app.module.ts” file.
Now we can use the filter pipe in our App Component. Let's assume that in our app.component.html we have an input box where we can enter our searchText and a list that makes use of this pipe to filter the results.
That’s it! Now when we run our app, we will see the following output:
