import { isPlatformBrowser } from '@angular/common' ; import { ChangeDetectorRef , Directive , Inject , Input , OnDestroy , OnInit , PLATFORM_ID , TemplateRef , ViewContainerRef } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { ResponsiveFacade } from '../+state/responsive.facade' ; import { ResponsiveStorage } from '../interfaces/responsive-storage.interface' ; @ Directive ( { selector : '[msMobile]' } ) export class MsMobileDirective implements OnInit , OnDestroy { /**
     * Subscription
     */ private subscription : Subscription ; /**
     * Inverse logic (is not mobile)
     */ private inverse = false ; @ Input ( ) set msMobile ( value ) { this . inverse = typeof value === 'boolean' ? ! value : false ; } constructor ( private changeDetectorRef , private templateRef , private viewContainer , private responsiveFacade , private responsiveStorage , @ Inject ( PLATFORM_ID ) private platformId ) { } ngOnInit ( ) { if ( isPlatformBrowser ( this . platformId ) ) { this . subscription = this . responsiveFacade . mobile$ . subscribe ( mobile => { this . updateView ( mobile ) ; } ) ; } else { const props = this . responsiveStorage . getProperties ( ) ; this . updateView ( props . mobile ) ; } } ngOnDestroy ( ) { if ( isPlatformBrowser ( this . platformId ) ) { this . subscription . unsubscribe ( ) ; } } param mobile private updateView ( mobile ) { if ( ! this . inverse ? mobile : ! mobile ) { this . viewContainer . createEmbeddedView ( this . templateRef ) ; } else { this . viewContainer . clear ( ) ; } this . changeDetectorRef . detectChanges ( ) ; } }