4: Add Services

b) Observable data

diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts
index 7e0771a..a59d76b 100644 (file)
--- a/src/app/hero.service.ts
+++ b/src/app/hero.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
 import { Hero } from './hero';
 import { HEROES } from './mock-heroes';
 
@@ -10,7 +11,7 @@ export class HeroService {
 
   constructor() { }
 
-  getHeroes() : Hero[] {
-    return HEROES;
+  getHeroes() : Observable<Hero[]> {
+    return of(HEROES);
   }
 }

diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 94f4266..1e29d4e 100644 (file)
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -24,6 +24,8 @@ export class HeroesComponent implements OnInit {
   }
 
   getHeroes() : void {
-    this.heroes = this.heroService.getHeroes();
+    this.heroService
+        .getHeroes()
+        .subscribe(heroes => this.heroes = heroes);
   }
 }