import { Component , OnDestroy } from '@angular/core' ; import { NavItem } from './ui/model/nav-item' ; import { MediaChange , MediaObserver } from "@angular/flex-layout" ; import { Subscription } from 'rxjs' ; import { menu } from './ui/model/menu' ; @ Component ( { selector : 'app-features' , templateUrl : './features.component.html' , styleUrls : [ './features.component.css' ] } ) export class FeaturesComponent implements OnDestroy { private opened : boolean = true ; private mediaWatcher : Subscription ; private menu : NavItem [ ] = menu ; constructor ( private media ) { this . mediaWatcher = this . media . media$ . subscribe ( ( mediaChange ) => { this . handleMediaChange ( mediaChange ) ; } ) ; } private handleMediaChange ( mediaChange ) { if ( this . media . isActive ( 'lt-md' ) ) { this . opened = false ; } else { this . opened = true ; } } ngOnDestroy ( ) { this . mediaWatcher . unsubscribe ( ) ; } }