[Angular 2] Passing data to components with @Input

@Input allows you to pass data into your controller and templates through html and defining custom properties. This allows you to easily reuse components, such as item renderers, and have them display different values for each instance of the renderer.

 

todoItemRender.ts

import {Input, Component, View} from "angular2/angular2";

@Component({
    selector: 'todo-item-render'
})
@View({
    template: `
       <div>
           <span [content-editable]="todoinput.status === 'started'">{{todoinput.title}}</span>
           <button (click)="todoinput.toggle()">Toggle</button>
       </div>
    `
})

export class TodoItemRender{
    @Input() todoinput: TodoModel;
}

 

todoList.ts

import {Component, View, NgFor} from 'angular2/angular2';
import {TodoService} from './todoService';
import {TodoItemRender} from './todoItemRender'

@Component({
    selector: 'todo-list'
})
@View({
    directives: [NgFor, TodoItemRender],
    template: `
          <div>
                <todo-item-render
                    *ng-for="#todo of todoService.todos"
                    [todoinput]="todo"
                >
                </todo-item-render>
          </div>
    `
})

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

    }
}