How to use filter concept in angular 2

Yes we can do the filtering in Angular 2 as well, instead of filter it is pipe concept. Pipe will take the data and convert into desired output. There are many built in pipes like date, uppercase etc. Let us check here how we can create a custom pipes.

Sample JSON

[
 {
 name:'Prashobh',
 exp:'9',
 },
 {
 name:'Abraham',
 exp:'15',
 },
 {
 name:'George',
 exp:'2',
 },
 {
 name:'John',
 exp:'20',
 }
]

Above JSON contains the list of employees and their experience. I am going to filter this data in such a way that, if the person has more than 10 years experience it should display over qualified and less than 5 as average and the remains as it is.

Let us check first how we can achieve in Angular one.

Using Angular 1

---

Filter

angular.module('yourmodule').filter('quality', function($filter)
{
 return function(value)
 {
    var input = '';
 if(value<5)
 {
    input = 'Average';
 }
 else if(value>10)
 {
    input = 'Over Qualified (Exp '+value+')';
 }
 else
 {
    input = value
 }
 return input;
 };
});

HTML

<div>
 <ul>
  <li ng-repeat="i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

It is pretty straight forwards and you can see the desired output. Now let us see how it is in angular 2. Here we will be using angular 2 + typescript.

Using Angular 2

---

Component

import {Component} from 'angular2/core'

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

Now let us create a sample pipe.

import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
    name:'quality'
})

export class QualityPipe implements PipeTransform{
    transform(value:any){
        var input = '';
        if(value<5)
            input = 'Average';
        else if(value>10)
            input = 'Over Qualified (Exp '+value+')';
       else
            input = value
        return input;
    }
}

We are done with the pipe, here Quality is the pipe name. If you add the pipe directly in view it won't work as we didn't import dependencies in our component.

Import pipe dependencies.

import {QualityPipe} from './sample-pipe';

And add pipe name inside our decorator.

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})

Final component

import {Component} from 'angular2/core'
import {QualityPipe} from './sample-pipe';

@Component({
    selector: 'sample-list',
    templateUrl: 'app/sample-list.html',
    pipes:[QualityPipe]
})
export class sampleComponent {
    title: string;
    items: any[];
    constructor() {
        this.title = "Angular 2 filter";
        this.items = [{
            name:'Prashobh',
            exp:'9',
        },
        {
            name:'Abraham',
            exp:'15',
        },
        {
            name:'George',
            exp:'2',
        },
        {
            name:'John',
            exp:'20',
        }
        ]
    }
}

View

<h2>{{title}}</h2>

<div>
 <ul>
  <li *ngFor="let i of items">
 <p>{{i.name}}</p>
 <p>{{i.exp | quality}}</p>
  </li>
 </ul>
</div>

Run "npm start" you can see the output like below.

Related Post

1. How to start with Angular js 2

2. ng-repeat in angular js 2