The implementation I want to share is how you could filter an array of non-nested objects using Pipes in Angular.

Consider an array of JSON objects exported from users.ts

export const users=[

{“title”:”Monsieur”,”first”:”Niklas”,”last”:”Philippe”,”age”:20,”gender”:”male”,”email”:”niklas.philippe@example.com”},
{“title”:”Mrs”,”first”:”Nicoline”,”last”:”Jensen”,”age”:4,”gender”:”female”,”email”:”nicoline.jensen@example.com”},
{“title”:”Miss”,”first”:”Lilly”,”last”:”Smith”,”age”:34,”gender”:”female”,”email”:”lily.smith@example.com”},
{“title”:”Mr”,”first”:”Julio”,”last”:”Ibanez”,”age”:40,”gender”:”male”,”email”:”julio.ibanez@example.com”},
{“title”:”Monsieur”,”first”:”Horst”,”last”:”Bernard”,”age”:52,”gender”:”male”,”email”:”horst.bernard@example.com”}
]

I would like to create a table with all the above details and search for any thing in the table using a search box as well as sort any column in the table in ascending or descending order.

We have used 2 pipes:filter and sort as you can see below. The sort pipe is chained to the filter pipe. This means the results of the filter pipe are passed as input to the sort pipe.

<tr *ngFor="let x of users|filter:searchTerm|sort:direction:column:type">

We are passing the users array and the searchTerm which the user enters in the search box as arguments to the **filter **pipe.

The **sort **pipe takes 4 arguments:The results of the filter pipe, the **direction **of sorting i.e ascending or descending,the **type **of column to sort i.e string or numeric and also the **column **to be sorted.

#filtering #sorting #pipes #angular