import { Component,Input  } from '@angular/core';
import {Hero } from '../models/hero';

import { Location } from '@angular/common';
import { ActivatedRoute, Params }   from '@angular/router';

//ngOnInit
import { OnInit } from '@angular/core';

import 'rxjs/add/operator/switchMap';

import { HeroService } from '../services/hero.service';

@Component({
  selector: 'hero-detail',
  // template: `
  //   <div *ngIf="hero">
  //     <h2>{{hero.name}} details!</h2>
  //     <div><label>id: </label>{{hero.id}}</div>
  //     <div>
  //       <label>name: </label>
  //       <input [(ngModel)]="hero.name" placeholder="name"/>
  //     </div>
  //   </div>
  // `
   templateUrl:'./hero-detail.component.html',
  
  styleUrls:['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  
    constructor(
      private route: ActivatedRoute,
      private location: Location,
      private heroService: HeroService
    ) {}

ngOnInit(): void {
  this.route.params
    .switchMap((params: Params) => this.heroService.getHero(+params['id']))
    .subscribe(hero => this.hero = hero);
}
  goBack(): void {
  this.location.back();
}
 }