diff --git a/src/app/hero-search/hero-search.component.html b/src/app/hero-search/hero-search.component.html
index 021cac2..cee79d7 100644
--- a/src/app/hero-search/hero-search.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/hero-search/hero-search.component.ts b/src/app/hero-search/hero-search.component.ts
index ec60b9c..c80a864 100644
--- a/src/app/hero-search/hero-search.component.ts
+++ b/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);
+  }
+
 }
\ No newline at end of file