import {Injectable} from "@angular/core"; import {BehaviorSubject, Observable, Subscriber} from "rxjs"; import {ActivationStart, Router} from "@angular/router"; @Injectable({ providedIn: 'root' }) export class LayoutService { /** * Set this to true when sidebar items are ready. */ private openSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add hasSidebar: false on data of route config, if sidebar is not needed. */ private hasSidebarSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add hasHeader: false on data of route config, if header is not needed. */ private hasHeaderSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add hasAdminMenu: true on data of route config, if global sidebar should be used. */ private _hasAdminMenuSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add hasMiniMenu: true on data of route config, if sidebar should be closed to mini should be used. */ private _hasMiniMenuSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add isFrontPage: true on data of route config, if current route is for front page. */ private _isFrontPageSubject: BehaviorSubject = new BehaviorSubject(false); private _isSmallScreenSubject: BehaviorSubject = new BehaviorSubject(false); sub:any; ngOnDestroy() { this.clearSubscriptions(); } clearSubscriptions(){ if (this.sub instanceof Subscriber) { this.sub.unsubscribe(); } } constructor(private router: Router) { this.sub = this.router.events.subscribe(event => { if (event instanceof ActivationStart) { let data = event.snapshot.data; if (data['hasSidebar'] !== undefined && data['hasSidebar'] === false) { this.setHasSidebar(false); } else { this.setHasSidebar(true); } if (data['hasHeader'] !== undefined && data['hasHeader'] === false) { this.setHasHeader(false); } else { this.setHasHeader(true); } if (data['hasAdminMenu'] !== undefined && data['hasAdminMenu'] === true) { this.setHasAdminMenu(true); } else { this.setHasAdminMenu(false); } if (data['hasMiniMenu'] !== undefined && data['hasMiniMenu'] === true) { this.setHasMiniMenu(true); } else { this.setHasMiniMenu(false); } if (data['isFrontPage'] !== undefined && data['isFrontPage'] === true) { this.setFrontPage(true); } else { this.setFrontPage(false); } if (data['isSmallScreen'] !== undefined && data['isSmallScreen'] === true) { this.setSmallScreen(true); } else { this.setSmallScreen(false); } } }); } get open(): boolean { return this.openSubject.getValue(); } setOpen(value: boolean) { this.openSubject.next(value); } get hasSidebar(): Observable { return this.hasSidebarSubject.asObservable(); } setHasSidebar(value: boolean) { this.hasSidebarSubject.next(value); } get hasHeader(): Observable { return this.hasHeaderSubject.asObservable(); } setHasHeader(value: boolean) { this.hasHeaderSubject.next(value); } get hasAdminMenu(): Observable { return this._hasAdminMenuSubject.asObservable(); } setHasAdminMenu(value: boolean) { this._hasAdminMenuSubject.next(value); } get hasMiniMenu(): Observable { return this._hasMiniMenuSubject.asObservable(); } setHasMiniMenu(value: boolean) { this._hasMiniMenuSubject.next(value); } get isFrontPage(): Observable { return this._isFrontPageSubject.asObservable(); } setFrontPage(value: boolean) { this._isFrontPageSubject.next(value); } get isSmallScreen(): boolean{ return this._isSmallScreenSubject.getValue(); } setSmallScreen(value: boolean) { this._isSmallScreenSubject.next(value); } }