Categories
Uncategorized

Parameterized Pipes for input search in Angular (custom filters)

Lets say we want to filter through a list of jobs that look like the following using an Angular 4.4.5 setup.

job-state.ts

jobs filter

We need to create a custom pipe that takes in the search term as an input parameter for this.

search-jobs.pipe.ts

app.module.ts

Now add this app.module.ts to the Declarations part of NgModule, after including the AppComponent where you wish to use this.

app.component.ts

Make sure you have app.component.ts that is somewhat similar to the base structure here.

app.component.html

Now add the following code into your app.component.html file or your components template.