[Angular 2] Property Binding
Angular Property Binding
2023-09-14 08:59:20 时间
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] Understanding the Angular Component providers property
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [AngularJS] angular-md-table for Angular material design
- [AngularJS] Angular 1.3 new $q constructor
- [AngularJS] angular.copy()
- [Angular] Isolate Scope .2
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] Using a Reducer to Change an Object's Property Inside an Array
- [Angular 2] @Input Custom public property naming
- [Angular 2] Template property syntax
- Angular 项目里 angular.json 文件内容的学习笔记
- Angular 依赖注入 useClass 的实例创建位置
- Angular 服务器端渲染应用的开箱即用的缓存功能问题