Angular 2 Material SideNav always open on desktp and normal on mobile

Question

I made this simple side nav in angular 2 material. I want to keep oppened=\"true\" only for desktop and keep the default behavior for mobiles and laptops. This used to be pr

Answer 1

After struggling myself a bit for this similar post, I used what seems like a bit of a hack that I found at https://github.com/angular/material2/issues/1130, and which I've put in this plunker.

The key in this solution is that it checks the media size on open, and on resize event, showing/hiding the side navigation panel depending on width available. Credit for this goes to sikemullivan

ngOnInit() {
    window.onresize = (e) => {
      this.checkMenu();
    };
    this.checkMenu();
  }

  checkMenu() {
    this._ngZone.run(() => {
      var w = window.innerWidth;
      if (w > 450) {
        this.start.open();
      } else {
        this.start.close();
      }
    });
  }

I call it a hack, because handling this through a resize event handler seems like taking out a sledge hammer to solve the problem. I would think there's something easier, but couldn't find anything easier myself.

Another issue with the above, is that if you're like me, maybe you'd like something that keeps open, then you'd need an answer to Prevent md-sidenav from being closed using Escape key when opened

Answer 2

@vinagreti pointed out the incredibly useful angular/flex-layout project, which reintroduces some of the layout functionality that used to be part of Angular Material, but was removed in versions 2+. I was already using that library so it was pretty easy to use it in conjunction with the sidenav from Angular Material to do what you've described here: have a sidenav that is always open on large screens, but toggleable on smaller screens.

You can make use of the disableClose, mode, and opened attributes of the sidenav component to get what you want.

The markup:

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen">
...Contents of Sidenav go here....
</md-sidenav>

The component:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from "rxjs/Subscription";
import { MediaChange, ObservableMedia } from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  watcher: Subscription;
  sidenavPosition = 'side';
  isSidenavOpen = true;
  isSidenavCloseDisabled = true;

  constructor(media: ObservableMedia) {
    this.watcher = media.subscribe((change: MediaChange) => {
      if (change.mqAlias === 'xs') {
        this.sidenavPosition = 'over';
        this.isSidenavCloseDisabled = false;
      } else {
        this.isSidenavOpen = true;
        this.isSidenavCloseDisabled = true;
        this.sidenavPosition = 'side';
      }
    });
  }

  ngOnDestroy () {
    this.watcher.unsubscribe();
  }
}

Answer 3

You should be using disableClose property as below

 w = window.innerWidth;
      constructor(){
        if (this.w > 450) {
        this.disableClose=true;
      } else {
        this.disableClose=false;
      }

HTML will be as

<md-sidenav-container class="container-fluid" >
  <div class="col-md-1">
    <button md-button (click)="sidenav.open()">
      <i class="fa fa-list"></i>
    </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <md-sidenav #sidenav class="example-sidenav" [disableClose]="disableClose">
<!---------------------------above line-------------------------------->
   Manu bar
  </md-sidenav>

LIVE DEMO