error handling in ui

tools/app/angular-tour-of-heroes/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Hero } from '../hero';
 import { HeroService } from '../hero.service';
+import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -10,14 +11,18 @@ import { HeroService } from '../hero.service';
 export class DashboardComponent implements OnInit {
   heroes: Hero[] = [];
 
-  constructor(private heroService: HeroService) { }
+  constructor(private heroService: HeroService, private messageService: MessageService) { }
 
   ngOnInit(): void {
     this.getHeroes();
   }
 
   async getHeroes(): Promise<void> {
-    this.heroes = await this.heroService.getHeroes()
+    try {
+      this.heroes = await this.heroService.getHeroes();
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
   }
 
 }

tools/app/angular-tour-of-heroes/src/app/hero-detail/hero-detail.component.ts

@@ -4,6 +4,7 @@ import { Location } from '@angular/common';
 
 import { Hero } from '../hero';
 import { HeroService } from '../hero.service';
+import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-hero-detail',
@@ -14,22 +15,31 @@ export class HeroDetailComponent implements OnInit {
 
   @Input() hero: Hero;
   
-  constructor(private route: ActivatedRoute, private heroService: HeroService, private location: Location) { }
+  constructor(private route: ActivatedRoute, private heroService: HeroService, private location: Location, private messageService: MessageService) { }
 
   ngOnInit(): void {
     this.getHero();
   }
 
   async getHero(): Promise<void> {
-    const id = +this.route.snapshot.paramMap.get('id');
-    this.hero = await this.heroService.getHero(id)
+    try {
+      const id = +this.route.snapshot.paramMap.get('id');
+      this.hero = await this.heroService.getHero(id)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
   }
 
   goBack(): void {
     this.location.back();
   }
 
-  save(): void {
-    // this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
+  async save(): Promise<void> {
+    try {
+      await this.heroService.updateHero(this.hero)
+      this.goBack()
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
   }
 }

tools/app/angular-tour-of-heroes/src/app/hero.service.ts

@@ -18,11 +18,11 @@ export class HeroService {
 
   getHero(id: number): Promise<Hero> {
     this.messageService.add(`HeroService: fetch hero id=${id}`);
-    return this.http.get<Hero>(`http://172.16.3.185:5000/hero?id=${id}`).toPromise()
+    return this.http.get<Hero>(`http://172.16.3.185:5000/hero/${id}`).toPromise()
   }
 
-  updateHero(hero: Hero): Observable<any> {
+  updateHero(hero: Hero): Promise<any> {
     this.messageService.add(`HeroService: save change: id=${hero.id}, name=${hero.name}`);
-    return of(true);
+    return this.http.put<Hero>(`http://172.16.3.185:5000/hero/${hero.id}`, hero).toPromise()
   }
 }