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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(MdSidenav) sidenav: MdSidenav;

  @HostListener('window:resize', ['$event'])
  onResize(evt: Event) {
    console.log(evt);
    if ((evt.target as any).innerWidth < 500) {
      this.sidenav.close();
    } else {
      this.sidenav.open();
    }
  }

}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

--- 
+++ 
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, HostListener, ViewChild } from '@angular/core';
+import { MdSidenav } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +7,16 @@
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  @ViewChild(MdSidenav) sidenav: MdSidenav;
+
+  @HostListener('window:resize', ['$event'])
+  onResize(evt: Event) {
+    console.log(evt);
+    if ((evt.target as any).innerWidth < 500) {
+      this.sidenav.close();
+    } else {
+      this.sidenav.open();
+    }
+  }
+
 }
Hide sidebar when viewport is too small
