[Angular 2] Using Pipes to Filter Data

Pipes allow you to change data inside of templates without having to worry about changing it in the Controller. Creating a custom Pipe is as simple as giving it a name and a transform function that output what you expect.

 

startsWith.ts:

import {Pipe} from 'angular2/angular2';

@Pipe({
    name: 'startsWith'
})

export class StartsWith{

    transform(value, [field, letter]){  // 1: value passed in, 2: array
        return value.filter((item) => {
            return item[field].startsWith(letter);
        })
    }
}

 

todoList:

/**
 * Created by wanzhen on 23.10.2015.
 */
import {Component, View, NgFor} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender';
import {StartsWith} from './startsWith';

@Component({
    selector: 'todo-list'
})
@View({
    pipes: [StartsWith],
    directives: [NgFor, TodoItemRender],
    template: `
          <div>
                <todo-item-render
                    *ng-for="#todo of todoService.todos | startsWith:'title':'e'"  // title is the prop of #todo, filter get only start letter with 'e'
                    [todoinput]="todo"
                >
                </todo-item-render>
          </div>
    `
})

export class TodoList{
    constructor(
        public todoService:TodoService
    ){

    }
}