<!-- #docregion ng-for -->
<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
<!-- #enddocregion ng-for -->

<!-- #docregion heroes-styled -->
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<!-- #enddocregion heroes-styled -->

<!-- #docregion selectedHero-click -->
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  ...
</li>
<!-- #enddocregion selectedHero-click -->

<!-- #docregion selectedHero-details -->
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
<!-- #enddocregion selectedHero-details -->

<!-- #docregion ng-if -->
<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>
<!-- #enddocregion ng-if -->

<!-- #docregion hero-array-1 -->
heroes = HEROES;
<!-- #enddocregion hero-array-1 -->

<!-- #docregion heroes-template-1 -->
<h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>
<!-- #enddocregion heroes-template-1 -->

<!-- #docregion heroes-ngfor-1 -->
<li *ngFor="let hero of heroes">
<!-- #enddocregion heroes-ngfor-1 -->

<!-- #docregion class-selected-1 -->
[class.selected]="hero === selectedHero"
<!-- #enddocregion class-selected-1 -->

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