import { Component , OnInit , OnDestroy } from '@angular/core' ; import { Router } from '@angular/router' ; import { MdSnackBar , MdSnackBarConfig } from '@angular/material' ; import { Subscription } from 'rxjs/Subscription' ; import { Planet , ConfigService , DataService } from '../../core' ; @ Component ( { selector : 'ro-planet-list' , templateUrl : './planet-list.component.html' , styleUrls : [ './planet-list.component.scss' ] } ) export class PlanetListComponent implements OnDestroy , OnInit { title = 'Planets' ; planets : Planet [ ] ; selectedPlanet : Planet ; private subscription : Subscription ; constructor ( public snackBar , private configService , private dataService , private router ) { } ngOnDestroy ( ) { this . subscription . unsubscribe ( ) ; } ngOnInit ( ) { this . subscription = this . dataService . getPlanets ( ) . subscribe ( planets => { this . planets = planets ; } ) ; } selectPlanet ( planet ) { this . selectedPlanet = planet ; this . router . navigate ( [ 'planets' , planet . id ] ) ; console . log ( planet ) ; } }