import { MediaChange , MediaObserver } from '@angular/flex-layout' ; import { Injectable } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; import { debounceTime , distinctUntilChanged } from 'rxjs/operators' ; @ Injectable ( { providedIn : 'root' } ) export class FuseMatchMediaService { activeMediaQuery : string ; onMediaChange : BehaviorSubject < string > = new BehaviorSubject < string > ( '' ) ; param { ObservableMedia } _observableMedia constructor ( private _observableMedia ) { this . activeMediaQuery = '' ; this . _init ( ) ; } private private _init ( ) { this . _observableMedia . asObservable ( ) . pipe ( debounceTime ( 500 ) , distinctUntilChanged ( ) ) . subscribe ( ( change ) => { if ( ! change || ! change . length ) { return ; } if ( this . activeMediaQuery !== change [ 0 ] . mqAlias ) { this . activeMediaQuery = change [ 0 ] . mqAlias ; this . onMediaChange . next ( change [ 0 ] . mqAlias ) ; } } ) ; } }