[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.

 

Create a Pipe:

import {Pipe} from 'angular2/core';
@Pipe({
    name: 'search'
})

export class SearchPipe{
    transform(todos){
        return todos.filter(
            (todoModel) => {
                // Only showing the todo starts with 'e'
                return todoModel.title.startsWith('e');
            }
        )
    }
}

 

Using a pipe:

import {Component} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoItemRenderer} from './TodoItemRenderer';
import {SearchPipe} from './search-pipe';

@Component({
    selector: 'todo-list',
    pipes: [SearchPipe],
    directives: [TodoItemRenderer],
    template: `
        <ul>
            <li *ngFor="#todo of todoService.todos | search">
                <todo-item-renderer [todo]="todo"></todo-item-renderer>
            </li>
            
        </ul>
    `
})

 

-------------------