Angular 2 – writing a custom filter

Filter Pipes are important to filter data based on filter arguments.
Below is a custom filter for Angular2 which filters data based on id given.

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

@Pipe({name: 'boxFilter'})
export class FilterBoxes implements PipeTransform {
  transform(boxes: any[], args: any): any {
    return boxes.filter(box=> box.id.indexOf(args) !== -1);
  }
}

Usage:

Usage in Angular2 template.

let results = [
{ id: 'one', res: 'one-one', value: 'one-one-one' },
{ id: 'one', res: 'two-two', value: 'two-two-two' },
{ id: 'three', res: 'three-three', value: 'three-three-three' }
]; 

<ul>
   // filter the above results where id = 'one', this will return 2 resultset.
   <li *ngFor="let result of results | boxFilter:'one'"> 
    {{result.res}} - {{result.value}}
   <li>
</ul>

Hope this is beneficial to the readers! 🙂