Material2 Auto hide sidenav on smaller screens

Question

It looks like Material2 doesn't have anything similar to Material1 opened="$mdMedia('gt-md')" that would hide and show sidenav depending upon the screenwidth.

https://github.com/angular/material2/issues/45

In the mean time, What would be the best approach to take while implementing such feature in my project.

Plunker

Answer 1

Here's one way of doing it.

app.component.html

<md-sidenav-layout>
   <md-sidenav #sidenav mode="side"><label>Sidenav</label></md-sidenav>
   <button md-raised-button="md-raised-button" color="primary" (click)="sidenav.toggle()">Open Sidenav</button>
</md-sidenav-layout>

app.component.ts

import { Component, ViewChild, HostListener } from '@angular/core';
import {MdSidenav} from "@angular/material";

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    @ViewChild('sidenav') sidenav: MdSidenav;

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        if (event.target.innerWidth < 500) {
            this.sidenav.close();
        }
    }
}