Angular 2 Drop down selector

main.ts

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

@Component({
    selector: 'app',
    directives: [TodoInput, TodoList, StatusSelector],
    template: `
        <todo-input></todo-input>
        <status-selector (selectedStatus)="status=$event"></status-selector>
        <todo-list [status]="status"></todo-list>
    `
})

class App {
    
}

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

started-pipe.ts

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

export class StartedPipe{
    // Second param is an array get from the param of pipe
    transform(todos, [status]){
        return todos.filter(
            (todoModel) => {
                // Only showing the todo starts with 'e'
                return todoModel.status === status;
            }
        )
    }
}

StatusSelector.ts

import {Component, EventEmitter, Output} from 'angular2/core';
@Component({
    selector: "status-selector",
    template: `
        <div>
            <select #sel (change)="selectedStatus.emit(sel.value)">
                <option *ngFor="#status of statuses">
                    {{status}}
                </option>
            </select>
        </div>
    `
})

export class StatusSelector{
    @Output() selectedStatus = new EventEmitter();
    statuses = ["started", "completed"];

    ngOnInit(){
        this.selectedStatus.emit(this.statuses[0]);
    }
}

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, EventEmitter, Output} 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)="toggleTodo.emit(todo)">Toggle</button>
            <button (click)="todo.edit()">Edit</button>
        </div>
    `
})

export class TodoItemRenderer{
    @Input() todo;
    @Output() toggleTodo = new EventEmitter();
}

TodoList.ts

import {Component, Input} from 'angular2/core';
import {TodoService} from './TodoService';
import {TodoItemRenderer} from './TodoItemRenderer';
import {StartedPipe} from './started-pipe';

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

export class TodoList{

    @Input() status;

    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];
    }

    toggleTodo(todo) {

        const i = this.todos.indexOf(todo);

        todo.toggle();

        this.todos = [
            ...this.todos.slice(0, i),
            todo,
            ...this.todos.slice( i + 1)
        ];
    }
}