Angular 2+ Filter Pipes And Custom Filter Pipes

In this article, I am going to show you the predefined filter pipe usage as well as show you how we can create our own custom filter pipe and its usage.

To get the usage of predefined filter pipe, we have to follow the below steps.

Step #1 Install ng2-filter-pipe package

We can install ng2-filter-pipe package either using bower or by using npm tool or with any other tools. Below is the command to install ng2-filter-pipe package using npm tool:

npm install ng2-filter-pipe

We can install the same package using bower  tool as well, below is the command to install the above package using bower tool:

bower install ng2-filter-pipe

Step #2 Add the filter module into AppModule.ts file

Import the below-highlighted package into AppModule.ts file and add that module into imports section of @NgModule, which is highlighted as below.

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';
import { Ng2FilterPipeModule } from 'ng2-filter-pipe';

@NgModule({
  imports: [BrowserModule, Ng2FilterPipeModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step #3 Use the filter pipe in your component

Once step #2 is done, use the filter pipe in your component. So, to use the filter pipe in our component, we have to create our own component. Find the below sample code to create a sample component.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ex-app',
  template: `
    <div>
        <input type="text" [(ngModel)]="userFilter.name" placeholder="name">
        <ul>
          <li *ngFor="let item of items | filterBy: itemFilter">{{ item.text }}</li>

          <!-- if you want to show default message -->
          <li *ngIf="(items | filterBy: stringFilter).length === 0">No matches found</li>
        </ul>
    </div>
  `
})

export class AppComponent {
 items: any[] = [{ name: 'Copy of 123456' }, { name: 'Copy of 1234568' }, { name: ''Copy of asd', ''Copy of asd1', 'Current Profile', '1234 1234', '123321122 1234551', '123321122 1234551'}];
  itemFilter: any = { text: '' };
}

Step #4 Compile and Run the application

You can compile and run the application by using the below commands using npm tool.

npm start

or

ng serve

or

ng s

or

npm test

Output



Step #5 Type some text in the search box

Type some text which is present in the list. For instance:

Ex #1 "asd"

Output

Ex #2 "1234"

Output



Let's consider that the above filter does not meet our requirement, so in such cases, we have to go with our own custom filter to meet the requirement.

Follow the below steps to create our own custom filter.

Step #1 Create a custom search filter pipe

Below is the sample code to create a custom filter pipe with name "search-filter.pipe.ts"  file, where you can write our own logic to meet the requirement. In the below code snippet I have created a custom pipe named "search-filter.pipe.ts" file which takes 2 inputs, first is the list of values and second is the search input. The below-mentioned code checks the index in the given list for the provided search input and returns the filtered list.

search-filter.pipe.ts

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

@Pipe({
    name: 'searchfilter'
})

@Injectable()
export class SearchFilterPipe implements PipeTransform {
    transform(items: any[], value: string): any[] {
        if (!items) return [];
        if(value) {
            return items.filter(item => item.text.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
        }
        else
        {
            return items;
        }
    }
}

Step #2 Refer the component in the module file

Below is the code to create a module file and declare the above created component in the declaration section.

app.module.ts

------------------------
------------------------
------------------------
import { SearchFilterPipe } from './pipes/search-filter.pipe';

@NgModule({
    imports: [
         ------------------------
         ------------------------
         ------------------------
        Ng2FilterPipeModule
    ],
    declarations: [
         ------------------------
         ------------------------
         ------------------------
        SearchFilterPipe
    ],
    providers: [
        ------------------------
        ------------------------
        ------------------------
    ],
    exports: [
        ------------------------
        ------------------------
        ------------------------
    ],
    entryComponents: [
        ------------------------
        ------------------------
        ------------------------
    ]
})
export class CoreModule {
}

Step #3 Use the created custom filter in the component template file

In the below code snippet, I have used the created custom filter pipe which is highlighted as below.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ex-app',
  template: `
    <div>
        <input type="text" [(ngModel)]="userFilter.name" placeholder="name">
        <ul>
          <li *ngFor="let item of items | searchfilter: consentFilter.text">{{ item.text }}</li>

          <!-- if you want to show default message -->
          <li *ngIf="(items | filterBy: stringFilter).length === 0">No matches found</li>
        </ul>
    </div>
  `
})

export class AppComponent {
 items: any[] = [{ name: 'Copy of 123456' }, { name: 'Copy of 1234568' }, { name: ''Copy of asd', ''Copy of asd1', 'Current Profile', '1234 1234', '123321122 1234551', '123321122 1234551'}];
  itemFilter: any = { text: '' };
}

Step #3 Type some text in the search box

Type some text which is present in the list. For instance:

Ex #1 "asd"

Output

Ex #2 "1234"

Output

I appreciate your valuable feedback. Happy coding :)