Filter Feature in Angular2

Filter is important feature of AngularJs, Angular2 and Angular4. It is basically used to sort the item from the list of items which can be in the form of array or an object array.In this a batch is selected from the given array and a new array is returned and corresponding items are dispalyed on the UI.
Angular provide two modules for the filter purpose i.e. pipe and pipeTransform

Step1:-

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

Step2 :- Create filter component in filter folder.

import { Pipe, PipeTransform } from '@angular/core';  
import { coats } from '../models/coats';  
  
@Pipe({  
    name: 'appfilter',  
    pure: false  
})  
  
export class AppFilterPipe implements PipeTransform {  
    transform(items: any[], filter: Coats): any {  
        if (!items || !filter) {  
            return items;  
        }  
        return items.filter(item => item.name.indexOf(filter.name) !== -1);  
    }  
}  

In this name of filter is appFilter, {Coats} is a class which consist of given property.
Step3 :-

export class Coats{  
    id: number;  
    name: string;  
}  

Step4:- Now, import AppFilterPipe in app.module.ts

import { NgModule }       from '@angular/core';  
import { BrowserModule }  from '@angular/platform-browser';  
import { FormsModule }    from '@angular/forms';  
import { HttpModule, JsonpModule } from '@angular/http';  
  
import { AppComponent } from './app.component';  
import {AppFilterPipe} from './filter/MyFilterPipe';  
  
@NgModule({  
  imports: [  
    BrowserModule,  
    FormsModule,  
    HttpModule,  
    JsonpModule  
  ],  
  declarations: [  
    AppComponent,  
    AppFilterPipe  
  ],  
  bootstrap: [ AppComponent ]  
})  
export class AppModule {  
}  

Step5:-
Now use filter in that component.

import { Component } from '@angular/core';  
import {Coats} from '../models/coats';  
  
@Component({  
  template: `  
    <h2>Coats</h2>  
    <p>List of Coats</p>  
    <div>  
      <ul>  
       <li *ngFor="let coat of coats | myfilter:filterargs">  
         {{coat.id}} {{coat.name}}  
       </li>   
      </ul>  
    </div>  
    `  
})  
  
export class CoatListComponent {  
  filterargs = {name: 'Eagle'};  
  coats: Birds[] = [  
  {id: 11, name: 'Crow'},  
  {id: 12, name: 'Peacock'},  
  {id: 13, name: 'Sparrow'},  
  {id: 14, name: 'Cuckoo'},  
  {id: 15, name: 'Eagle'},  
  {id: 16, name: 'Swan'},  
  {id: 17, name: 'Duck'},  
  {id: 18, name: 'Hen'},  
  {id: 19, name: 'Parrot'},  
  {id: 20, name: 'Woodpecker'}  
  ]  
}   

In *ngFor we use the name of the item which we want to filter. Filtering can be hardcoded as well as dynamic also.

Step6:-

filterargs = {name: 'Parrot'};  

 
Here we are using hardcoded value for the understanding purpose.

step7:-

In the final step the property is used inside *ngFor

<li *ngFor="let bird of birds | myfilter:filterargs">  

It will sort the item name 'Parrot' and the output will be diplayed on client side.