CODEWITHSUNDEEP
angularangular-material
shaikh madyan
shaikh madyan

Reputation: 74

Angular 12 Material mat-drawer auto hide

How to auto-hide "mat drawer" when screen resizes to 1100px code example would be appreciated. Thank you

Upvotes: 3

Views: 1960

Answers (1)

Vimal Patel
Vimal Patel

Reputation: 3065

You can use use @HostListener which will be bound to window.resize event handler and control the opening of mat-drawer based on a flag (isOpened).

This function will be executed for every window resizing and your mat drawer will be hidden for lower resolution view.

Component:

export class SidenavAutosizeExample {
  isOpened: boolean = true;
  desktopViewWidth: number = 1100;
  ngOnInit() {
    this.onResize(window.innerWidth);
  }

  @HostListener('window:resize', ['$event.target.innerWidth'])
  onResize(width: number) {
    this.isOpened = width >= this.desktopViewWidth;
  }
}

Template:

<mat-drawer #drawer class="example-sidenav" mode="side" [opened]="isOpened">
    <p>Auto-resizing sidenav</p>
    <p>Lorem, ipsum dolor sit amet consectetur.</p>
    <button mat-raised-button>
      Toggle extra text
    </button>
  </mat-drawer>

Working example:- https://stackblitz.com/edit/angular-8pfj1d?file=src%2Fapp%2Fsidenav-autosize-example.ts

Upvotes: 4

Related Questions