6: Get Data from a Server
[examples/angular-tour-of-heroes] / src / app / heroes / heroes.component.ts
1 import { Component, OnInit } from '@angular/core';
2 import { Hero } from '../hero';
3 import { HeroService } from '../hero.service';
4 import { MessageService } from '../message.service';
5
6 @Component({
7   selector: 'app-heroes',
8   templateUrl: './heroes.component.html',
9   styleUrls: ['./heroes.component.css']
10 })
11 export class HeroesComponent implements OnInit {
12
13   heroes: Hero[];
14
15   constructor(
16       private heroService : HeroService,
17       private messageService : MessageService) { }
18
19   ngOnInit() {
20     this.getHeroes();
21   }
22
23   getHeroes() : void {
24     this.heroService
25         .getHeroes()
26         .subscribe(heroes => this.heroes = heroes);
27   }
28
29   add(name: string): void {
30     name = name.trim();
31     if (!name) { return; }
32     this.heroService.addHero({ name } as Hero)
33       .subscribe(hero => {
34         this.heroes.push(hero);
35       });
36   }
37 }