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: `          
     
                
                      
                
     
    `})export class TodoList{    constructor(        public todoService:TodoService    ){    }}