import { Component , OnInit , ViewChild , TemplateRef , AfterViewInit , ElementRef , OnChanges , SimpleChanges } from '@angular/core' ; import { ReuseTabComponent } from './reuse-tab/reuse-tab.component' ; import { fromEvent } from 'rxjs' ; @ Component ( { selector : 'app-backstage-default' , templateUrl : './backstage-default.component.html' , styleUrls : [ './backstage-default.component.less' ] } ) export class BackstageDefaultComponent implements OnInit , AfterViewInit { isCollapsed = false ; triggerTemplate = null ; sidebarWidth : any = 256 ; tabWidth : any = 0 ; @ ViewChild ( 'trigger' , { static : true } ) customTrigger : TemplateRef < void > ; @ ViewChild ( 'reuseTab' , { static : true } ) reuseTab : ReuseTabComponent ; constructor ( private hst ) { } ngOnInit ( ) { } ngAfterViewInit ( ) { const that = this ; fromEvent ( window , 'resize' ) . subscribe ( ( event ) => { that . smartDetection ( ) ; that . doLayout ( ) ; } ) ; setTimeout ( ( ) => { that . smartDetection ( ) ; that . doLayout ( ) ; } , 500 ) ; } changeTrigger ( ) { this . triggerTemplate = this . customTrigger ; } collapsedTrigger ( ) { this . isCollapsed = ! this . isCollapsed ; this . doLayout ( ) ; const e = document . createEvent ( 'Event' ) ; e . initEvent ( 'resize' , true , true ) ; window . dispatchEvent ( e ) ; } tabSize ( n ) { this . tabWidth = n ; } doLayout ( ) { this . reuseTab . tabResize ( this . sidebarWidth ) ; } private smartDetection ( ) { if ( window . innerWidth < 500 ) { this . hst . nativeElement . querySelector ( 'nz-sider' ) . style . display = 'none' ; this . isCollapsed = true ; } else if ( window . innerWidth < 1000 ) { this . hst . nativeElement . querySelector ( 'nz-sider' ) . style . display = '' ; this . isCollapsed = true ; } else { } } }