6: Get Data from a Server

j) Heroes and HTTP - Add a new hero

diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 6df713d..349d043 100644 (file)
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -31,6 +31,14 @@ export class HeroService {
       );
   }
 
+  /** POST: add a new hero to the server */
+  addHero(hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
+      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
+      catchError(this.handleError<Hero>('addHero'))
+    );
+  }
+
   /** GET hero by id. Will 404 if id not found */
   getHero(id: number): Observable<Hero> {
     this.log(`requested hero id=${id}`);

diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 2eb180e..6866fe0 100644 (file)
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1,4 +1,13 @@
 <h2>My Heroes</h2>
+<div>
+  <label>Hero name:
+    <input #heroName />
+  </label>
+  <!-- (click) passes input value to add() and then clears the input -->
+  <button (click)="add(heroName.value); heroName.value=''">
+    add
+  </button>
+</div>
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
     <a routerLink="/detail/{{hero.id}}">

diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index eaa069b..38ab888 100644 (file)
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -25,4 +25,13 @@ export class HeroesComponent implements OnInit {
         .getHeroes()
         .subscribe(heroes => this.heroes = heroes);
   }
+
+  add(name: string): void {
+    name = name.trim();
+    if (!name) { return; }
+    this.heroService.addHero({ name } as Hero)
+      .subscribe(hero => {
+        this.heroes.push(hero);
+      });
+  }
 }