Add search to the dashboard

src/app/dashboard/dashboard.component.html

@@ -5,3 +5,5 @@
     {{hero.name}}
   </a>
 </div>
+
+<app-hero-search></app-hero-search>

src/app/hero.service.ts

@@ -65,6 +65,21 @@ export class HeroService {
       catchError(this.handleError<Hero>('deleteHero'))
     );
   }
+
+  /* GET heroes whose name contains search term */
+  searchHeroes(term: string): Observable<Hero[]> {
+    if (!term.trim()) {
+      // if not search term, return empty hero array.
+      return of([]);
+    }
+    return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`)
+    .pipe(
+      tap(x => x.length ?
+        this.log(`found heroes matching "${term}"`) :
+        this.log(`no heroes matching "${term}"`)),
+      catchError(this.handleError<Hero[]>('searchHeroes', []))
+      );
+    }
   
     /**
    * Handle Http operation that failed.