Property Binding is the 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=NewEventemitter (); Constructor () {} Selecthero (Hero) { This. Changed.emit (Hero); This. isSelected =true; }}
So ' class ' was attribute on the DOM, but the ' class.active ' is a property.
' Aria-label ' is attribute, so need to write like ' Attr.aria-label '.
If you don't like the use of ' class.active ', you can use the ' Ngclass ' as shown in Commnets
[Angular 2] Property Binding