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

Question

I am learning angular 2 from the official hero book .

<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 read the guide on property binding here , but still could not understand the following code:

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

Question 1: I know that the html tag has a class property, but the class property does not have a key called "selected". A class property can have a value that is the string "selected". Why is this required property valid?

Question 2: How does the property binding translate to class = "selected"?

Answer 1

[class.xxx] [style.xxx.yy] - Angular2,

[class.my-class]="expression"

( ) CSS my-class ( ) , expression true false

[style.width.px]="numExpression"

width ( ) to the value of numExpression and the unit px` ( CSS)

Answer 2

, class HTML, angular. selected angular class , , true/false.

class="selected", , li, , .