[Angular 2] @Input Custom public property naming

TodoList.ts:

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

 

TodoItemRender.ts:

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'todo-item-renderer',
    template: `
        <div>    
            <span [hidden]="todo.status == 'completed'"
                  [contentEditable]="todo.isEdit">{{todo.title}}</span>
            <button (click)="todo.toggle()">Toggle</button>
            <button (click)="todo.edit()">Edit</button>
        </div>
    `
})

export class TodoItemRenderer{
    @Input() todo
}

Current we pass [todo] to the itemRender from List, we actually can give @Input('name'):

 

TodoList.ts:

 <todo-item-renderer [todoItem]="todo"></todo-item-renderer>

TodoItemRender.ts:

@Input('todoItem') todo

 

 

Ref: Link