import {Pipe} from 'angular2/angular2';

@Pipe({

    name: 'simpleSearch'

})

export class SimpleSearch{

    transform(value, [field, letter]){

        return value.filter((item) => {

            return item[field].includes(letter);

        })

    }

}

import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2';

import {TodoService} from './todoService';

import {TodoItemRender} from './todoItemRender';

import {StartsWith} from './startsWith';

import {SimpleSearch} from './simpleSearch';

import {LetterSelect} from './letterSelect';

import {TodoSearch} from './todoSearch';

@Component({

    selector: 'todo-list'

})

@View({

    pipes: [StartsWith, SimpleSearch],

    directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch],

    template: `

          <div>

                <todo-search #todo-search></todo-search>

                {{todoSearch.term}}

                <todo-item-render

                    *ng-for="#todo of (todoService.todos

                    | startsWith:'title':letterSelect.selectedLetter)

                    | simpleSearch:'title':todoSearch.term"

                    [todoinput]="todo"

                >

                </todo-item-render>

                <letter-select #letter-select></letter-select>

          </div>

    `

})

export class TodoList{

    constructor(

        public todoService:TodoService

    ){

    }

}