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. toString结果

    String[] str = new String[] { "a", "b", "c" }; System.out.println(str) ...

  2. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  3. apache添加php支持

    在php编译安装好后,需要在apache中添加对php的支持,方法:找到“#AddType application/x-gzip .gz .tgz”并在后面加入AddType application/ ...

  4. Spring静态属性注入

    今天遇到一个工具类,需要静态注入一个属性,方法如下: 第一步:属性的set和get方法不要加static package cn.com.chinalife.ebusiness.common.util; ...

  5. C#中的枚举器(转)

    术语表 Iterator:枚举器(迭代器) 如果你正在创建一个表现和行为都类似于集合的类,允许类的用户使用foreach语句对集合中的成员进行枚举将会是很方便的.这在C# 2.0中比 C# 1.1更容 ...

  6. twsited(4)--不同模块用redis共享以及用web发送数据到tcpserver

    上一章开头我们说,要连接之前flask系列文章中的用户,结果篇幅不够,没有实现. 今天我们把它实现一下.话说,不同模块之间,该如何联系在一起,通常都是mysql.redis.rabbitmq还有RPC ...

  7. flask开发restful api系列(6)-配置文件

    任何一个好的程序,配置文件必不可少,而且非常重要.配置文件里存储了连接数据库,redis的用户密码,不允许有任何闪失.要有灵活性,用户可以自己配置:生产环境和开发环境要分开,最好能简单的修改一个东西, ...

  8. 《python基础教程》笔记之 抽象

    创建函数 记录函数,在函数的开头写下字符串,它就会作为函数的一部分进行存储,这称为文档字符串,如 def square(x): 'Caculates the square of the number ...

  9. 《python基础教程》笔记之 序列通用操作

    索引 序列中的所有元素都是有编号的--从0开始递增.使用负数索引时,Python会从右边,也就是从最后一个元素开始计数,最后一个元素的位置编号是-1.此外,字符串是一个有字符组成的序列,字符串字面值可 ...

  10. IOS文件操作的两种方式:NSFileManager操作和流操作

    1.常见的NSFileManager文件方法 -(NSData *)contentsAtPath:path //从一个文件读取数据 -(BOOL)createFileAtPath: path cont ...