Zanex – Bootstrap Admin & Dashboard Template

    
		import { Component, OnInit, Input, Inject } from '@angular/core';
		import { Router , NavigationStart,
		  NavigationEnd,
		  NavigationCancel,
		  NavigationError} from '@angular/router';
		import { DOCUMENT } from '@angular/common';
		
		@Component({
		  selector: 'app-loader',
		  templateUrl: './loader.component.html',
		  styleUrls: ['./loader.component.scss']
		})
		export class LoaderComponent implements OnInit {
		  public showLoader: boolean = true;
		  public isSpinnerVisible = true;
		
		  @Input() display = false;
		  constructor(
			private router: Router,
			@Inject(DOCUMENT) private document: Document
		  ) { 
			this.router.events.subscribe(
			  event => {
				if (event instanceof NavigationStart) {
				  this.isSpinnerVisible = true;
				} else if (
				  event instanceof NavigationEnd ||
				  event instanceof NavigationCancel ||
				  event instanceof NavigationError
				){
				  this.isSpinnerVisible = false;
				}
			  },
			  () => {
				this.isSpinnerVisible = false;
			  }
			)
		  }
		  ngOnInit(): void {
		
		  }
		  ngOnDestroy() {
		 
		
			this.isSpinnerVisible = false;
		
		  }
		}
		


	

// ______________ PAGE LOADING
$(window).on("load", function(e) {
	$("#global-loader").fadeOut("slow");
})

	
	

    
		import { ViewportScroller } from '@angular/common';
		import { Component, HostListener, OnInit } from '@angular/core';
		
		@Component({
		  selector: 'app-tab-to-top',
		  templateUrl: './tab-to-top.component.html',
		  styleUrls: ['./tab-to-top.component.scss']
		})
		export class TabToTopComponent implements OnInit {
		  public show: boolean = false;
		
		  constructor( private viewScroller: ViewportScroller) { }
		
		  ngOnInit(): void {
		  }
		  @HostListener("window:scroll", [])
		  onWindowScroll(){
			let number = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
			if(number > 600){
			  this.show = true;
			} else {
			  this.show = false;
			}
		  }
		
		  taptotop(){
			this.viewScroller.scrollToPosition([0,0]);
		  }
		}
		

import { Directive, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from "@angular/common";

@Directive({
	selector: '[appFullscreen]'
})
export class FullscreenDirective {

	public fullScreen: boolean = false;
	public elem : any;
	idata: HTMLElement | any;
	idd: HTMLElement | any;
	data: string | any;
	idata1: HTMLElement | any;
	idd1: HTMLElement | any;

	constructor(
	@Inject(DOCUMENT) private document: any
	) {
	
	}

	ngOnInit(){
	this.elem = document.documentElement; 
	let Body:any = document.documentElement.querySelector('body')
	this.idata = Body.querySelector('.nav-link.full-screen-link').querySelector('i')
	document.addEventListener('fullscreenchange', this.exitHandler);
	document.addEventListener('webkitfullscreenchange', this.exitHandler);
	document.addEventListener('mozfullscreenchange', this.exitHandler);
	document.addEventListener('MSFullscreenChange', this.exitHandler);
	}
	@HostListener('click')
	
	onClick(){
	this.data = this.idata.classList.value
	console.log(this.data)
	if (this.data == "fe fe-maximize") {
		if (this.elem.requestFullscreen) {
		this.elem.requestFullscreen();
		this.idata.classList.add('fe-minimize')
		this.idata.classList.remove('fe-maximize')
		} else if (this.elem.mozRequestFullScreen) {
		/* Firefox */
		this.elem.mozRequestFullScreen();
		this.idata.classList.add('fe-minimize')
		this.idata.classList.remove('fe-maximize')
		} else if (this.elem.webkitRequestFullscreen) {
		/* Chrome, Safari and Opera */
		this.elem.webkitRequestFullscreen();
		this.idata.classList.add('fe-minimize')
		this.idata.classList.remove('fe-maximize')
		} else if (this.elem.msRequestFullscreen) {
		/* IE/Edge */
		this.elem.msRequestFullscreen();
		this.idata.classList.add('fe-minimize')
		this.idata.classList.remove('fe-maximize')
		}
	} 
	else {
		
		if (!this.document.exitFullscreen) {
		this.document.exitFullscreen();
		this.idata.classList.remove('fe-minimize')
		this.idata.classList.add('fe-maximize')
		} else if (this.document.mozCancelFullScreen) {
		/* Firefox */
		this.document.mozCancelFullScreen();
		this.idata.classList.remove('fe-minimize')
		this.idata.classList.add('fe-maximize')
		} else if (this.document.webkitExitFullscreen) {
		/* Chrome, Safari and Opera */
		this.document.webkitExitFullscreen();
		this.idata.classList.remove('fe-minimize')
		this.idata.classList.add('fe-maximize')
		
		} else if (this.document.msExitFullscreen) {
		/* IE/Edge */
		this.document.msExitFullscreen();
		this.idata.classList.remove('fe-minimize')
		this.idata.classList.add('fe-maximize')
		}
	}
	}

	exitHandler() {
	
	if (!document.fullscreenElement  ) {
		let Body:any = document.querySelector('body')
		this.idd = Body.querySelector('.nav-link.full-screen-link').querySelector('i') 
		this.idd.classList.remove('fe-minimize')
		this.idd.classList.add('fe-maximize')
	}
	}  
		
		 
		
	

    

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
	...
  ],
  imports: [
  	...
    NgbModule,
  ],
  providers: []
})
export class AppModule { }

    
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
	declarations: [
	...
	],
	imports: [
		...
	NgbModule,
	],
	providers: []
})
export class AppModule { }