import { ChangeDetectionStrategy , ChangeDetectorRef , Component , DoCheck , OnDestroy , OnInit } from '@angular/core' ; import { Router , RouterOutlet } from '@angular/router' ; import { Subscription } from 'rxjs' ; import { homeButtonStateTrigger , routeStateTrigger , sidebarButtonStateTrigger } from './app.animations' ; import { AppService } from './app.service' ; export interface MangolDemoItem { link : string ; title : string ; } declare let window ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] , animations : [ homeButtonStateTrigger , sidebarButtonStateTrigger , routeStateTrigger ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class AppComponent implements OnInit , DoCheck , OnDestroy { items : MangolDemoItem [ ] ; logo : string ; sidebarOpened : boolean ; sidebarOpenedSubscription : Subscription ; activeRouteData = '/demo-home' ; constructor ( private cdr , private appService , private router ) { this . sidebarOpenedSubscription = this . appService . sidebarOpenedSubject . subscribe ( ( opened ) => { if ( opened !== null ) { this . sidebarOpened = opened ; } } ) ; } ngOnInit ( ) { this . logo = 'assets/img/logo/mangol_logo.png' ; this . items = [ { link : '/demo-map' , title : 'Map' } , { link : '/demo-controllers' , title : 'Map controllers' } , { link : '/demo-sidebar' , title : 'Sidebar' } , { link : '/demo-layertree' , title : 'Layertree' } , { link : '/demo-featureinfo' , title : 'Feature info' } , { link : '/demo-measure' , title : 'Measure' } , { link : '/demo-print' , title : 'Print' } , { link : '/demo-full' , title : 'Full functionality' } ] ; } ngDoCheck ( ) { this . cdr . detectChanges ( ) ; } ngOnDestroy ( ) { if ( this . sidebarOpenedSubscription ) { this . sidebarOpenedSubscription . unsubscribe ( ) ; } } toggleSidebar ( ) { this . appService . sidebarOpenedSubject . next ( ! this . sidebarOpened ) ; } getAnimationData ( outlet ) { let activeRouteData = null ; const routeData = outlet . activatedRouteData [ 'animation' ] ; if ( ! routeData ) { activeRouteData = '/demo-home' ; } else { activeRouteData = '/' + routeData [ 'page' ] ; } this . activeRouteData = activeRouteData ; return this . activeRouteData ; } navigate ( item ) { if ( window . innerWidth <= 1000 ) { this . appService . sidebarOpenedSubject . next ( false ) ; } this . router . navigate ( [ item . link ] ) ; } navigateHome ( ) { if ( window . innerWidth <= 1000 ) { this . appService . sidebarOpenedSubject . next ( false ) ; } this . router . navigate ( [ '/demo-home' ] ) ; } }