<div id="search-component">
  <h4><label for="search-box">Hero Search</label></h4>

  <!-- #docregion input -->
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />
  <!-- #enddocregion input -->

  <ul class="search-result">
    <!-- #docregion async -->
    <li *ngFor="let hero of heroes$ | async" >
    <!-- #enddocregion async -->
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>
