Home » Featured, Headline, Software Development

Angular 2 – writing a custom filter

22 August 2016 No Comment

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 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' }

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

Hope this is beneficial to the readers! 🙂

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image