import { Injectable } from '@angular/core' ; import { MediaChange , MediaObserver } from '@angular/flex-layout' ; import { BehaviorSubject } from 'rxjs/BehaviorSubject' ; import { LayoutParameters , LayoutConfiguration } from './LayoutConfiguration' ; @ Injectable ( { providedIn : 'root' } ) export class DashboardLayoutService { public layout$ : BehaviorSubject < LayoutParameters > = new BehaviorSubject ( null ) ; private layoutConfiguration : LayoutConfiguration ; private setLayout ( attributes ) { this . layout$ . next ( attributes ) ; } constructor ( private observableMedia ) { this . init ( ) ; } public setLayoutConfiguration ( configuration ) { this . layoutConfiguration = configuration ; this . setLayout ( this . layoutConfiguration . xl ) ; } private init ( ) { this . observableMedia . asObservable ( ) . subscribe ( ( change ) => { const mq = change [ 0 ] . mqAlias ; if ( this . layoutConfiguration && this . layoutConfiguration [ mq ] ) { this . setLayout ( this . layoutConfiguration [ mq ] ) ; } } ) ; } }