title: What is the property in property binding [class.selected]?
body: <p>I am learning angular 2 from <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt2.html" rel="noreferrer">official hero tutorial</a>. </p>
  
  <pre><code>&lt;ul class="heroes"&gt;
        &lt;li *ngFor="let hero of heroes"
          [class.selected]="hero === selectedHero"
          (click)="onSelect(hero)"&gt;
          &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
        &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've read the guide about property binding <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding" rel="noreferrer">here</a>, but still couldn't understand the following code:</p>
  
  <pre><code>[class.selected]="hero === selectedHero"
  </code></pre>
  
  <p><strong>Question 1:</strong>
  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? </p>
  
  <p><strong>Question 2:</strong>
  How does above property binding translated to class="selected" ?</p>