import { AfterViewInit , Component , ElementRef , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { AppData } from './app.data' ; import { MDCSnackbar } from '@material/snackbar' ; import { NavigationEnd , NavigationError , NavigationStart , Router } from '@angular/router' ; import { BodyScrollService } from './core/body-scroll.service' ; import { FullscreenLoadingService } from './core/fullscreen-loading.service' ; import { SnackbarService } from './core/snackbar.service' ; export let fullscreenLoadingServiceObj = null ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent implements OnInit , AfterViewInit , OnDestroy { constructor ( private appData , private bodyScrollService , private fullscreenLoadingService , private snackbarService , private router ) { fullscreenLoadingServiceObj = this . fullscreenLoadingService ; } isFullscreenLoadingLayoutVisible = false ; snackbar : any = null ; @ ViewChild ( 'snackbar' , { static : false } ) snackbarElementRef : ElementRef ; ngOnInit ( ) { this . router . onSameUrlNavigation = 'reload' ; this . handleRouterEvents ( ) ; this . handleBodyScrollLock ( ) ; this . handleFullscreenLoading ( ) ; this . handleSnackbar ( ) ; } ngAfterViewInit ( ) { this . snackbar = new MDCSnackbar ( this . snackbarElementRef . nativeElement ) ; } ngOnDestroy ( ) { } handleRouterEvents ( ) { this . router . events . subscribe ( event => { if ( event instanceof NavigationStart ) { this . fullscreenLoadingService . show ( ) ; } if ( event instanceof NavigationEnd ) { this . fullscreenLoadingService . hide ( ) ; } if ( event instanceof NavigationError ) { this . fullscreenLoadingService . hide ( ) ; } } ) ; } handleBodyScrollLock ( ) { this . bodyScrollService . subject$ . subscribe ( value => { if ( value !== null ) { const body = document . querySelector ( '.body' ) as HTMLElement ; if ( body ) { body . style . overflowX = value ? 'hidden' : 'auto' ; body . style . overflowY = value ? 'hidden' : 'scroll' ; } } } ) ; } handleFullscreenLoading ( ) { this . fullscreenLoadingService . subject$ . subscribe ( value => { if ( value !== null ) { this . isFullscreenLoadingLayoutVisible = value ; if ( value ) { this . bodyScrollService . lock ( ) ; return ; } this . bodyScrollService . unlock ( ) ; } } ) ; } handleSnackbar ( ) { this . snackbarService . subject$ . subscribe ( value => { if ( value ) { if ( this . snackbar ?. isOpen ) { this . snackbar ?. close ( 'new text' ) ; } this . snackbar . labelText = value ; this . snackbar ?. open ( ) ; } } ) ; } }