import { Component , OnDestroy } from '@angular/core' ; import { Router , NavigationStart , NavigationEnd , NavigationCancel , NavigationError } from '@angular/router' ; import { SlimLoadingBarService } from 'ng2-slim-loading-bar' ; import { ToastCommunicationService } from './toast/toast-communication.service' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' } ) export class AppComponent implements OnDestroy { private sub : any ; private toastyComponentPosition : string ; constructor ( private slimLoader , private router , private toastCommunicationService ) { this . toastCommunicationService . position$ . subscribe ( pos => this . toastyComponentPosition = pos ) ; this . sub = this . router . events . subscribe ( event => { if ( event instanceof NavigationStart ) { this . slimLoader . start ( ) ; } else if ( event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError ) { this . slimLoader . complete ( ) ; } } , ( error ) => { this . slimLoader . complete ( ) ; } ) ; } ngOnDestroy ( ) { this . sub . unsubscribe ( ) ; } }