import { ChangeDetectorRef , Component , Inject , OnDestroy , OnInit , ViewEncapsulation } from '@angular/core' ; import { MatSnackBar , MatSnackBarConfig } from '@angular/material/snack-bar' ; import { Router } from '@angular/router' ; import { WINDOW } from '@ngx-starter-kit/core' ; import { MenuItem , MenuService } from '@ngx-starter-kit/navigator' ; import { AutoUnsubscribe } from 'ngx-auto-unsubscribe' ; import { Subject } from 'rxjs' ; dynamic @ AutoUnsubscribe ( ) @ Component ( { selector : 'ngx-sidenav' , templateUrl : './sidenav.component.html' , styleUrls : [ './sidenav.component.scss' ] , encapsulation : ViewEncapsulation . None , } ) export class SidenavComponent implements OnInit , OnDestroy { private destroyed$ = new Subject < void > ( ) ; items : MenuItem [ ] ; constructor ( private router , private menuService , private snackBar , private cd , @ Inject ( WINDOW ) private window ) { } ngOnInit ( ) { this . menuService . items$ . subscribe ( ( items ) => { this . items = items ; } ) ; } ngOnDestroy ( ) { } toggleIconSidenav ( ) { setTimeout ( ( ) => { this . window . dispatchEvent ( new Event ( 'resize' ) ) ; } , 300 ) ; this . menuService . isIconSidenav = ! this . menuService . isIconSidenav ; const snackBarConfig = { duration : 10000 , } as MatSnackBarConfig ; if ( this . menuService . isIconSidenav ) { this . snackBar . open ( 'You activated Icon-Sidenav, move your mouse to the content and see what happens!' , '' , snackBarConfig ) ; } } isIconSidenav ( ) { return this . menuService . isIconSidenav ; } }