Place MediaQueryList updates back in angular zone, fixing autohiding of sidenav. (#242)

Author: josephperrott

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core';
+import {Component, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MdSidenav, MdSidenavModule} from '@angular/material';
 import {Router, RouterModule} from '@angular/router';
@@ -15,8 +15,14 @@ const SMALL_WIDTH_BREAKPOINT = 840;
   encapsulation: ViewEncapsulation.None,
 })
 export class ComponentSidenav implements OnInit {
+  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
+
   constructor(public docItems: DocumentationItems,
-              private _router: Router) {}
+              private _router: Router,
+              zone: NgZone) {
+    // TODO(josephperrott): Move to CDK breakpoint management once available.
+    this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
+  }
 
   @ViewChild(MdSidenav) sidenav: MdSidenav;
 
@@ -29,7 +35,7 @@ export class ComponentSidenav implements OnInit {
   }
 
   isScreenSmall(): boolean {
-    return window.matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`).matches;
+    return this.mediaMatcher.matches;
   }
 }