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 NotaddMatchMediaService { activeMediaQuery : string ; onMediaChange : BehaviorSubject < string > ; constructor ( private mediaObserver ) { this . activeMediaQuery = '' ; this . onMediaChange = new BehaviorSubject < string > ( '' ) ; this . init ( ) ; } private private init ( ) { this . mediaObserver . media$ . pipe ( debounceTime ( 500 ) , distinctUntilChanged ( ) ) . subscribe ( ( change ) => { if ( this . activeMediaQuery !== change . mqAlias ) { this . activeMediaQuery = change . mqAlias ; this . onMediaChange . next ( change . mqAlias ) ; } } ) ; } }