[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