[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