What is the property in property binding [class.selected]?

Question

I am learning angular 2 from official hero tutorial.

<ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
</ul>

I've read the guide about property binding here, but still couldn't understand the following code:

[class.selected]="hero === selectedHero"

Question 1: I know html tag has a class property, but class property does not have a key called "selected". The class property may have a value, which is string "selected". How come this property binding is valid?

Question 2: How does above property binding translated to class="selected" ?

Answer 1

[class.xxx] and [style.xxx.yy] are special Angular2 binding syntax where

[class.my-class]="expression"

adds (or removes) the CSS class my-class to (or from) the element depending on whether expression results in true or false

[style.width.px]="numExpression"

Sets the width (or any other valid style property)to the value ofnumExpressionand the unitpx` (or any other valid CSS unit)

Answer 2

The difference here is that class is not related to the HTML element, it's an angular binding. You're binding the selected property of Angular's class object to the expression, which will remove or add the property if true/false.

The property binds to class="selected" because when you click the li element, your event handler for click sets the hero, and they match.