import { Component , OnInit } from '@angular/core' ; import { Hero } from '../hero' ; import { HeroService } from '../hero.service' ; @ Component ( { selector : 'app-heroes' , templateUrl : './heroes.component.html' , styleUrls : [ './heroes.component.css' ] } ) export class HeroesComponent implements OnInit { heroes : Hero [ ] ; constructor ( private heroService ) { } ngOnInit ( ) { this . getHeroes ( ) ; } getHeroes ( ) { this . heroService . getHeroes ( ) . subscribe ( heroes => this . heroes = heroes ) ; } add ( name ) { name = name . trim ( ) ; var strength = 11 ; if ( ! name ) { return ; } this . heroService . addHero ( { name , strength } as Hero ) . subscribe ( hero => { this . heroes . push ( hero ) ; } ) ; } delete ( hero ) { this . heroes = this . heroes . filter ( h => h !== hero ) ; this . heroService . deleteHero ( hero ) . subscribe ( ) ; } }