Return all results if no search parameter is given

Question

I was looking at the declarative RxJS approach to tour of heroes by Deborah Kurata. I would like to know how it would work in the following case:

1. By default, load all heroes
2. If there's a search term, show the search results

Now, this would be probably possible by doing something like this:

hero-search.component.ts:

  export class HeroSearchComponent {
  // DJK3 Assign to the declared Observable in the service
  heroes$ = this.heroService.filteredHeroes$;
  allHeroes$ = this.heroService.heroes$;

  searchActive = false;

  constructor(private heroService: HeroService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.heroService.search(term);
    this.searchActive = true;
  }
}

hero-search.component.html:

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ng-container *ngIf="!searchActive; else searchResults">
    {{allHeroes$ |async | json}}
  </ng-container>


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

</div>

But this looks wrong to me. Is there a better approach? Maybe checking this directly in the service?