<!-- #docplaster-->
<!-- #docregion -->
<h2>{{title}}</h2>

<label for="hero-name">New hero: </label>
<input type="text"
       id="hero-name"
       #box
       (keyup.enter)="addHero(box.value); box.value=''"
       placeholder="hero name">
<div>
  <input id="can-fly" type="checkbox" [(ngModel)]="canFly">
  <label for="can-fly">can fly</label>
</div>

<div>
  <input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
  <button type="button" (click)="reset()">Reset</button>
</div>

<h3>Heroes who fly (piped)</h3>
<div id="flyers">
<!-- #docregion template-flying-heroes -->
  <div *ngFor="let hero of (heroes | flyingHeroesImpure)">
    {{hero.name}}
  </div>
<!-- #enddocregion template-flying-heroes -->
</div>

<h3>All Heroes (no pipe)</h3>
<div id="all">
  <div *ngFor="let hero of heroes">
    {{hero.name}}
  </div>
</div>
