Angular 2 Pipe domo 2

main.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';
import {TodoService} from './TodoService';
import {TodoInput} from './TodoInput';
import {TodoList} from './TodoList';

@Component({
    selector: 'app',
    directives: [TodoInput, TodoList],
    template: `
        <todo-input></todo-input>
        <todo-list></todo-list>
    `
})

class App {
    
}

// []: we can inject service which can be used for the whole app
bootstrap(App, [
    TodoService
]);

search-pipe.ts

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');
            }
        )
    }
}

TodoInput.ts

import {Component} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoModule} from './TodoModule';

@Component({
    selector: 'todo-input',
    template: `
        <form (submit)="onSubmit()">
            <input type="text" [(ngModel)]="todoModule.title">
        </form>
    `
})

export class TodoInput {

    // Init a todoModule
    todoModule:TodoModule = new TodoModule();

    constructor(public todoService:TodoService) {

    }

    onSubmit() {
        this.todoService.addNewTodo(this.todoModule); 
        // After insert, create new TodoModule
        this.todoModule = new TodoModule();
        console.log(this.todoService.todos);
    }
}

TodoItemRenderer.ts

import {Component, Input, ViewEncapsulation} from 'angular2/core';
@Component({
    selector: 'todo-item-renderer',
    // encapsulation:ViewEncapsulation.Emulated, //Default, (parent style pass )in and no (child style go) out
    // encapsulation:ViewEncapsulation.Native, // no in and no out
    encapsulation:ViewEncapsulation.None, // in and out
    template: `
        <style>
            .completed{
                text-decoration: line-through;
            }
        </style>
        <div>    
            <span [ngClass]="todo.status"
                  [contentEditable]="todo.isEdit">{{todo.title}}</span>
            <button (click)="todo.toggle()">Toggle</button>
            <button (click)="todo.edit()">Edit</button>
        </div>
    `
})

export class TodoItemRenderer{
    @Input() todo
}

TodoList.ts

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>
    `
})

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

TodoModule.ts

export class TodoModule{
    status: string = "started";
    isEdit: boolean = false;

    constructor(public title:string=""){

    }

    toggle(){

        this.status = this.status === "started" ?
            "completed":
            "started";
    }

    edit(){
        this.isEdit = !this.isEdit;
    }
}

TodoService.ts

import {TodoModule} from './TodoModule';
export class TodoService{
    todos = [
        //init some todos
        new TodoModule("eat"),
        new TodoModule("sleep"),
        new TodoModule("code")
    ];

    addNewTodo(todo){
        this.todos = [...this.todos, todo];
    }
}