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

[Angular 2] @Input Custom public property naming的更多相关文章

  1. angular 的 @Input、@Output 的一个用法

    angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...

  2. Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)

    custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...

  3. [Angular] Create a custom validator for reactive forms in Angular

    Also check: directive for form validation User input validation is a core part of creating proper HT ...

  4. [Angular] Create a custom validator for template driven forms in Angular

    User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...

  5. angular学习input输入框筛选

    学习angular,看到 angular-phonecat测试用例,照着教程运行了一遍,对于初学者有点不是很理解angular 帅选代码的意思,于是找教材,参考资料,明白了input筛选原来这么简单. ...

  6. angular.js input

    <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8& ...

  7. [Angular 2] @Input & @Output Event with ref

    The application is simple, to build a color picker: When click the rect box, it will check the color ...

  8. [Angular Tutorial] 11 -Custom Filters

    在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...

  9. ng-packagr 打包报错 Public property X of exported class has or is using name 'Observable' from external module “/rxjs/internal/Observable” but cannot be named

    old import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable( ...

随机推荐

  1. 启动android程序报错

    提示错误如下: The connection to adb is down, and a severe error has occured. [2010-03-11 09:36:56 - HelloO ...

  2. HTML中属性ID和属性NAME的区别(转)

    ID和Name都可以用来标识一个标记,Javascript分别有两个方法getElementById和getElementByName来定位Dom节点. 区别如下: 1.我们知道在网页做Post提交时 ...

  3. 【译】addEventListener 第二个参数

    这是原文链接:Our Backwards DOM Event Libraries 浏览器APIs 先简单回顾一下各个浏览器提供了哪些绑定事件的接口. IE浏览器提供了element.attachEve ...

  4. drop表,然后创建表,插入数据,并创建索引等内容。

    execute immediate 'drop table sjb_jhgl_ydjhtdsbb';   execute immediate 'create table dw_sc.sjb_jhgl_ ...

  5. DELL R410升级网卡驱动

    官方链接http://zh-cn.broadcom.com/support/ethernet_nic/netxtremeii.php(官方驱动的名字偶尔会改)   注意确保服务器的kernel-dev ...

  6. 华为S5300交换机配置基于VLAN的本地端口镜像

    配置思路 1.  将Ethernet0/0/20接口配置为观察端口(监控端口) 2.  将VLAN 1.11.12.13.14配置为镜像VLAN 配置步骤 1.  配置观察端口 <Switch& ...

  7. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 《Javascript模式》之对象创建模式读书笔记

    引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ...

  9. bayes

    from numpy import * import time starttime = time.time() def loadDataSet(): postingList = [['my', 'do ...

  10. AudioServicesPlaySystemSound音频服务—备用

    对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规 ...