6: Get Data from a Server

[examples/angular-tour-of-heroes] / src / app / heroes / heroes.component.ts

diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index 8d9f662..38ab888 100644 (file)
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -1,4 +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-heroes',
@@ -7,9 +10,28 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeroesComponent implements OnInit {
 
-  constructor() { }
+  heroes: Hero[];
+
+  constructor(
+      private heroService : HeroService,
+      private messageService : MessageService) { }
 
   ngOnInit() {
+    this.getHeroes();
+  }
+
+  getHeroes() : void {
+    this.heroService
+        .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);
+      });
+  }
 }