From: Kai Moritz <kai@juplo.de>
Date: Sat, 30 May 2020 07:45:01 +0000 (+0200)
Subject: 6: Get Data from a Server
X-Git-Url: https://juplo.de/gitweb/?p=examples%2Fangular-tour-of-heroes;a=commitdiff_plain;h=3efe152e8e2be6f2dc172cf1ac476e2cb01be54b

6: Get Data from a Server
i) Heroes and HTTP - Update heroes
---

diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html
index 540f0f0..f3da802 100644
--- a/src/app/hero-detail/hero-detail.component.html
+++ b/src/app/hero-detail/hero-detail.component.html
@@ -10,4 +10,5 @@
     </label>
   </div>
 </div>
+<button (click)="save()">save</button>
 <button (click)="goBack()">go back</button>
diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts
index 76e7912..caeb796 100644
--- a/src/app/hero-detail/hero-detail.component.ts
+++ b/src/app/hero-detail/hero-detail.component.ts
@@ -37,6 +37,11 @@ export class HeroDetailComponent implements OnInit {
     });
   }
 
+  save(): void {
+    this.heroService.updateHero(this.hero)
+      .subscribe(() => this.goBack());
+  }
+
   goBack(): void {
     this.location.back();
   }
diff --git a/src/app/hero.service.spec.ts b/src/app/hero.service.spec.ts
index 7730d9f..407e8ce 100644
--- a/src/app/hero.service.spec.ts
+++ b/src/app/hero.service.spec.ts
@@ -62,7 +62,7 @@ describe('HeroService', () => {
     });
   });
 
-  describe('#getHero', () => {
+    describe('#getHero', () => {
 
     it('should return an empty observable for an invalid id', () => {
 
diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 75a002b..6df713d 100644
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -13,6 +13,9 @@ import { catchError, tap } from 'rxjs/operators';
 export class HeroService {
 
   heroesUrl = 'api/heroes';  // URL to web api
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
 
   constructor(
     private http: HttpClient,
@@ -38,6 +41,14 @@ export class HeroService {
     );
   }
 
+  /** PUT: update the hero on the server */
+  updateHero(hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
+      tap(_ => this.log(`updated hero id=${hero.id}`)),
+      catchError(this.handleError<any>('updateHero'))
+    );
+  }
+
   /**
    * Handle Http operation that failed.
    * Let the app continue.