3

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

shaikh madyan
  • 68
  • 5
  • 1
    Please be a bit more specific when asking a question: What have you tried so far, with a code example? / What do you expect? / What error do you get? For help, take a look at "[How to ask](//stackoverflow.com/help/how-to-ask)". – Vimal Patel Jul 26 '21 at 05:29
  • i applied mat-drawer with toggle everything works fine but i want a bit more so decided to auto hide mat-drawer when screen dragged to 1100px it works fine with jquery java and css media query but i face the issue when screen is on 1100px i set up width 0px but it doesnt allow to toggle mat-drawer bcz i set width to 0px .is there any possiblity that i can resize window and expect mat-drawer to hide/show auto .i am new to angular and this plateform – shaikh madyan Jul 26 '21 at 06:03

1 Answers1

4

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

Vimal Patel
  • 2,785
  • 2
  • 24
  • 38