import { Output , EventEmitter , NgZone , Directive , ElementRef } from '@angular/core' ; /**
 * Visibility Observer
 */ @ Directive ( { selector : 'visibility-observer' } ) export class VisibilityObserver { @ Output ( ) visible : EventEmitter < any > = new EventEmitter ( ) ; timeout : any ; isVisible : boolean = false ; constructor ( private element , private zone ) { this . runCheck ( ) ; } destroy ( ) { clearTimeout ( this . timeout ) ; } onVisibilityChange ( ) { this . zone . run ( ( ) => { this . isVisible = true ; this . visible . emit ( true ) ; } ) ; } runCheck ( ) { const check = ( ) => { if ( ! this . element ) { return ; } const { offsetHeight , offsetWidth } = this . element . nativeElement ; if ( offsetHeight && offsetWidth ) { clearTimeout ( this . timeout ) ; this . onVisibilityChange ( ) ; } else { clearTimeout ( this . timeout ) ; this . zone . runOutsideAngular ( ( ) => { this . timeout = setTimeout ( ( ) => check ( ) , 100 ) ; } ) ; } } ; this . zone . runOutsideAngular ( ( ) => { this . timeout = setTimeout ( ( ) => check ( ) ) ; } ) ; } }