import { Location } from '@angular/common' ; import { ChangeDetectionStrategy , Component } from '@angular/core' ; import { ActivatedRoute } from '@angular/router' ; import { Observable } from 'rxjs' ; import { filter , switchMap } from 'rxjs/operators' ; import { Hero } from '../hero' ; import { HeroService } from '../hero.service' ; @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : 'app-hero-detail' , templateUrl : './hero-detail.container.html' , } ) export class HeroDetailContainerComponent { hero$ : Observable < Hero > = this . route . paramMap . pipe ( filter ( params => params . has ( 'id' ) ) , switchMap ( params => this . heroService . getHero ( + params . get ( 'id' ) ) ) ) ; constructor ( private route , private heroService , private location ) { } goBack ( ) { this . location . back ( ) ; } save ( hero ) { this . heroService . updateHero ( hero ) . subscribe ( ( ) => this . goBack ( ) ) ; } }