Close sidenav when width is less than 700

Question

Close sidenav when width is less than 700

Navigation

#1 by (0 votes)

0

I have a sidenav of angled design material that I need when the width is less than 700, open the screen with the nav closed, and when it is larger than 700 the screen can open with the nav open.

I tried something like:

 @ViewChild('sidenav') sidenav: MatSidenav;

  mobHeight = screen.height
  mobWidth = screen.width;

  fechaNav(){
    this.sidenav.close();
  }

  constructor() {
    if(this.mobWidth < 700){
      this.sidenav.close();
    }
  }

I also tried on ngOnInit however the screen continues to open with the nav open.

This this.sidenav.close () function is correct, I use it to close the sidenav when the user clicks on some item, but for some reason I am not able to execute it in conjunction with the constructor or ngoninit.

javascript css angular

asked by anonymous 22.07.2018 / 19:24

1 answer

Error emulating App on Samsung events.js: 72 error - Error running my first global app with express

score 0 · Answer 1

To get the width of the screen it looks like this:

innerWidth: number;

ngOnInit() {
    this.innerWidth = window.innerWidth;
    if(this.innerWidth < 700){
        this.sidenav.close();
   }
}

To keep updated on resize

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}