import { Component,OnInit } from '@angular/core';
import {Hero} from './models/hero'
import {HeroService} from './services/hero.service'
import { HttpModule } from '@angular/http';


@Component({
  selector: 'my-app',
  // template: `<h1>Hello1 {{name}}</h1>`,
  templateUrl: 'app/app.component.html',

  styleUrls:['app/app.component.css'],
   providers: [HeroService]
})
export class AppComponent  { 
  name = 'Angular1'; 
  hero: Hero ={id:1, name:'Anderson'};
// heroes: Hero[];

// constructor(){
//     var heroService = new HeroService();
//     this.heroes=heroService.getHeroes();
//   }

//Service Demo with DI
  heroes: Hero[];

//   constructor(private heroService: HeroService){
//     //  this.heroes=heroService.getHeroes();

//     // Async services and Promises 
//     this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
//   }

// //ngOnInit
  constructor(private heroService: HeroService) {
  }
  
  ngOnInit(): void {
     this.getHeroes();
  }
 getHeroes(): void {
    // this.heroService.getHeroes().then(heroes => this.heroes = heroes);

    //Simulate server latency
    // this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);

    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
 // Event Handling
  selectedHero: Hero;
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    // alert(this.selectedHero.name);
  }
}