[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