add The searchTerms RxJS subject

src/app/hero-search/hero-search.component.html

@@ -1,7 +1,7 @@
 <div id="search-component">
   <label for="search-box">Hero Search</label>
   <input #searchBox id="search-box" (input)="search(searchBox.value)" />
-
+    
   <ul class="search-result">
     <li *ngFor="let hero of heroes$ | async" >
       <a routerLink="/detail/{{hero.id}}">
@@ -9,4 +9,4 @@
       </a>
     </li>
   </ul>
-</div>
+</div>

src/app/hero-search/hero-search.component.ts

@@ -37,4 +37,12 @@ export class HeroSearchComponent implements OnInit {
       switchMap((term: string) => this.heroService.searchHeroes(term)),
     );
   }
+
+  private searchTerms = new Subject<string>();
+
+  // Push a search term into the observable stream.
+  search(term: string): void {
+    this.searchTerms.next(term);
+  }
+
 }