Close sidenav when width is less than 700

Question

I have a sidenav of the angular design material that I need that when the width is less than 700, open the screen with the Nav closed, and when it is greater 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 in ngOnInit but the screen keeps opening with the Nav open.

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 run it in conjunction with the constructor or ngoninit.

Answer 1

To get the width of the screen does so:

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;
}