app.component.ts

import { Component, OnInit } from '@angular/core';
import {
  GuardsCheckStart,
  NavigationCancel,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router,
} from '@angular/router';
import { ProfileService } from './profile/services/profile.service';
import { AuthService } from './services/auth.service';
import { RouterListenerService } from './services/routerListener.service';
import { UpdateService } from './services/update.service';
import { PrintService } from './shared/service/print.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public title = 'resin';
  public loading = true;

  constructor(
    public printService: PrintService,
    private authService: AuthService,
    private profilService: ProfileService,
    private routerListener: RouterListenerService,
    private updateService: UpdateService,
    private router: Router
  ) {
    if (this.authService.isLoggedIn()) {
      this.profilService.getProfile();
    }
    this.setHeightApp();
    window.addEventListener('resize', () => {
      this.setHeightApp();
    });
    this.routerListener.loadRouting();
    // handle pwa update
    this.updateService.subscribeUpdate();

    this.router.events.subscribe((event) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.loading = true;
          break;
        }

        case event instanceof GuardsCheckStart:
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel: {
          this.loading = false;
          break;
        }
        case event instanceof NavigationError: {
          setTimeout(() => {
            this.loading = false;
          }, 100);
          break;
        }
        default: {
          break;
        }
      }
    });
  }

  ngOnInit(): void {
    /**
     * Reset scroll to top for article reading
     */
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      document.getElementsByClassName('app-body')[0].scrollTo(0, 0);
    });
  }

  private setHeightApp(): void {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
}