<!-- #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 -->
  @for (hero of (heroes | flyingHeroesImpure); track hero) {
    <div>{{ hero.name }}</div>
  }
  <!-- #enddocregion template-flying-heroes -->
</div>

<h3>All Heroes (no pipe)</h3>
<div id="all">
  @for (hero of heroes; track hero) {
    <div>{{ hero.name }}</div>
  }
</div>
