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

@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:

...Contents of Sidenav go here....

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