import { Component, OnInit } from '@angular/core';

import {ActivatedRoute} from "@angular/router";

import {StarWarsService} from "../heros.service";

import {Observable} from "rxjs";

@Component({

  selector: 'app-hero',

  templateUrl: 'hero.component.html',

  styleUrls: ['hero.component.css']

})

export class HeroComponent implements OnInit {

  hero: Observable<Object>;

  constructor(private router: ActivatedRoute, private starwarService: StarWarsService) {

    this.hero = router.params.map((p:any) => p.id)

      .switchMap( id => this.starwarService.getPersonDetail(id))

      .startWith({

        name: 'Loading...',

        image: ''

      })

  }

  ngOnInit() {

  }

}

<div>

  <h2>{{(hero | async)?.name}}</h2>

  <img [src]="(hero | async)?.image" [alt]="(hero | async)?.name">

  <!--

    Notice that, here we use ? mark. This is not necessary if we use 'startWith({name: '', image: ''})'

    startWith will set init value, so that hero.name / hero.image won't be undefined

   -->

</div>

import {Injectable, Inject} from '@angular/core';

import {STARWARS_BASE_URL} from "../shared/constance.service";

import {Http} from "@angular/http";

import "rxjs/add/operator/map";

import "rxjs/add/operator/switchMap";

@Injectable()

export class StarWarsService {

    constructor(@Inject(STARWARS_BASE_URL) private starwarUrl,

      private http: Http

    ) {}

    getPeople(){

      return this.http.get(`${this.starwarUrl}/people`)

        .map( res => res.json())

    }

    getPersonDetail(id){

      return this.http.get(`${this.starwarUrl}/people/${id}`)

        .map( res => res.json())

        .map( (hero:any) => Object.assign({}, hero, {

          image: `${this.starwarUrl}/${hero.image}`

        }))

    }

}