[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
[Angular 2] @Input Custom public property naming的更多相关文章
- angular 的 @Input、@Output 的一个用法
angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...
- Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)
custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...
- [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 ...
- [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 ...
- angular学习input输入框筛选
学习angular,看到 angular-phonecat测试用例,照着教程运行了一遍,对于初学者有点不是很理解angular 帅选代码的意思,于是找教材,参考资料,明白了input筛选原来这么简单. ...
- angular.js input
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8& ...
- [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 ...
- [Angular Tutorial] 11 -Custom Filters
在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...
- 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( ...
随机推荐
- 启动android程序报错
提示错误如下: The connection to adb is down, and a severe error has occured. [2010-03-11 09:36:56 - HelloO ...
- HTML中属性ID和属性NAME的区别(转)
ID和Name都可以用来标识一个标记,Javascript分别有两个方法getElementById和getElementByName来定位Dom节点. 区别如下: 1.我们知道在网页做Post提交时 ...
- 【译】addEventListener 第二个参数
这是原文链接:Our Backwards DOM Event Libraries 浏览器APIs 先简单回顾一下各个浏览器提供了哪些绑定事件的接口. IE浏览器提供了element.attachEve ...
- drop表,然后创建表,插入数据,并创建索引等内容。
execute immediate 'drop table sjb_jhgl_ydjhtdsbb'; execute immediate 'create table dw_sc.sjb_jhgl_ ...
- DELL R410升级网卡驱动
官方链接http://zh-cn.broadcom.com/support/ethernet_nic/netxtremeii.php(官方驱动的名字偶尔会改) 注意确保服务器的kernel-dev ...
- 华为S5300交换机配置基于VLAN的本地端口镜像
配置思路 1. 将Ethernet0/0/20接口配置为观察端口(监控端口) 2. 将VLAN 1.11.12.13.14配置为镜像VLAN 配置步骤 1. 配置观察端口 <Switch& ...
- ajax上传文件进度条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 《Javascript模式》之对象创建模式读书笔记
引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ...
- bayes
from numpy import * import time starttime = time.time() def loadDataSet(): postingList = [['my', 'do ...
- AudioServicesPlaySystemSound音频服务—备用
对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规 ...