[Angular 2] Property Binding
Property Binding is bind property NOT attribute!
- import {Component, Input, Output, EventEmitter} from 'angular2/core';
- @Component({
- selector: 'hero-item',
- styles: [
- '.active {color: red}'
- ],
- template: `
- <li [class.active]="isSelected"
- [attr.aria-label]="hero.name"
- (click)="selectHero(hero)">
- {{hero.name}}
- </li>
- `
- })
- // <li [ngClass]="{active: isSelected}"></li>
- export class HeroItem{
- label="This is a super hero";
- isSelected = false;
- @Input() hero ;
- @Output() changed = new EventEmitter();
- constructor(){
- }
- selectHero(hero){
- this.changed.emit(hero);
- this.isSelected = true;
- }
- }
So 'class' is attribute on DOM, but 'class.active' is an property.
'aria-label' is attribute, so need to write like 'attr.aria-label'.
If you don't like use 'class.active', you can use 'ngClass' as shown in commnets
[Angular 2] Property Binding的更多相关文章
- Unity3D学习笔记——NGUI之Property Binding
Property Binding:用于绑定两个组件,然后可以将一个组件的信息发送给另一个组件. 效果图如下: 一:使用步骤 1.建立一个Sprite 2.建立一个Label 3.为Sprite添加Pr ...
- 从 SimpleIntegerProperty 看 Java属性绑定(property binding) 与 观察者模式(Observable)
//TODO:ExpressionHelper .bindBidirectional双向绑定.以及IntegerExpression的一系列算术方法和返回的IntegerBinding暂未详细解析(比 ...
- [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bin ...
- [译]Exploring Angular 1.3: Binding to Directive Controllers
原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...
- Event Binding in Angular
https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...
- angular学习(二)—— Data Binding
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...
- 【Angular 5】数据绑定、事件绑定和双向绑定
本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...
- angular学习3
#创建了一个component 查看angular.json文件: "prefix":"app", 在所创建的component的selector上添加了app ...
- Angular 2 Architecture Overview
Module 简单来说模块(module)就是完成共同目的的代码块,export一些内容例如一个类.函数.或值变量. component就是一个基本的Angular块,一个component类其实也是 ...
随机推荐
- Swift语言 代码添加文本输入框 和 占位文本
//懒加载文本输入框 private lazy var textView: UITextView = { let textView = UITextView() textView.font = UIF ...
- iOS 改变UITextField中光标颜色
第一种: [[UITextField appearance] setTintColor:[UIColor blackColor]]; 这个方法会影响整个app的所有UITextFiled... 第二种 ...
- 用CAGradientLayer实现渐变色动画
效果图: github:https://github.com/RinpeChen/CAGradientLayerBasicDemo
- a标签增加onclick事件提示未定义function
项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...
- 动态脚本,在js里面又写js
不知道怎么回事 代码测试不过 var a=document.createElement("script"); a.type="text/javascript"; ...
- 多线程12-CyclicBarrier、CountDownLatch、Exchanger
1.CyclicBarrier 表示大家彼此等待,大家集合好后才开始出发,分散活动后又在指定地点集合碰面 package org.lkl.thead.foo; import java.util.con ...
- HTML5 canvas 中的线条样式
线条样式属性 lineCap 设置或返回线条的结束端点样式 butt 默认.向线条的每个末端添加平直的边缘. round 向线条的每个末端添加圆形线帽. ...
- 在ubuntu14.14 安装php扩展扩展出现的问题
我是在ubuntu14.14 安装的 lnmp. 部分扩展.均已安装好,但是我用apt-get 方式安装 redis和curl扩展时,我的配置都设置但是从phpinfo里面看没有响应的配置项. 于是我 ...
- WebSQL实例记录
<table id="content"> </table> <br> <input type="button" id= ...
- js限制textarea文本框的文字个数
现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能.今天带来的这个Js限制表单文本 框文字数量的例子,相信有此方面需要的是个不错的参考.为了便于 ...