Angular 2 property syntax

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

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.todos.push(this.todoModule);
        // After insert, create new TodoModule
        this.todoModule = new TodoModule();
        console.log(this.todoService.todos);
    }
}

TodoList.ts

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

@Component({
    selector: 'todo-list',
    template: `
        <ul>
            <li *ngFor="#todo of todoService.todos">
                <span [hidden]="todo.status == 'completed'"
                    [contentEditable]="todo.isEdit">{{todo.title}}</span>
                <button (click)="todo.toggle()">Toggle</button>
                <button (click)="todo.edit()">Edit</button>
            </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")
    ];
}