import { Component , OnInit , OnDestroy } from '@angular/core' ; import { Router } from '@angular/router' ; import { MdSnackBar , MdSnackBarConfig } from '@angular/material' ; import { Subject } from 'rxjs/Subject' ; import 'rxjs/add/operator/takeUntil' ; import { Character , ConfigService , DataService } from '../../core' ; @ Component ( { selector : 'ro-character-list' , templateUrl : './character-list.component.html' , styleUrls : [ './character-list.component.scss' ] } ) export class CharacterListComponent implements OnDestroy , OnInit { title = 'Characters' ; characters : Character [ ] ; selectedCharacter : Character ; private onDestroy = new Subject ( ) ; constructor ( public snackBar , private configService , private dataService , private router ) { } ngOnDestroy ( ) { this . onDestroy . next ( ) ; } ngOnInit ( ) { this . dataService . getCharacters ( ) . takeUntil ( this . onDestroy ) . subscribe ( characters => { this . characters = characters ; } ) ; } selectCharacter ( character ) { this . selectedCharacter = character ; this . router . navigate ( [ 'characters' , character . id ] ) ; console . log ( character ) ; } }