4: Add Services
[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   selectedHero : Hero;
16
17   onSelect(hero : Hero): void {
18     this.selectedHero = hero;
19     this.messageService.add(`HeroService: Selected hero id=${hero.id}`);
20   }
21
22   constructor(
23       private heroService : HeroService,
24       private messageService : MessageService) { }
25
26   ngOnInit() {
27     this.getHeroes();
28   }
29
30   getHeroes() : void {
31     this.heroService
32         .getHeroes()
33         .subscribe(heroes => this.heroes = heroes);
34   }
35 }