fix(drawer): drawer running inside the zone keydown event.

Currently the drawer is listening to the event 'keydown' inside the zone. This makes the change detector be fired every time while whe are pressing 'any' key.

Author: llorenspujol

src/lib/sidenav/drawer.ts

@@ -41,6 +41,7 @@ import {startWith} from 'rxjs/operators/startWith';
 import {takeUntil} from 'rxjs/operators/takeUntil';
 import {debounceTime} from 'rxjs/operators/debounceTime';
 import {map} from 'rxjs/operators/map';
+import {fromEvent} from 'rxjs/observable/fromEvent';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import {matDrawerAnimations} from './drawer-animations';
@@ -119,7 +120,6 @@ export class MatDrawerContent implements AfterContentInit {
     '[@transform]': '_animationState',
     '(@transform.start)': '_onAnimationStart($event)',
     '(@transform.done)': '_onAnimationEnd($event)',
-    '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',
@@ -258,6 +258,7 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
               private _focusTrapFactory: FocusTrapFactory,
               private _focusMonitor: FocusMonitor,
               private _platform: Platform,
+              private _ngZone: NgZone,
               @Optional() @Inject(DOCUMENT) private _doc: any) {
 
     this.openedChange.subscribe((opened: boolean) => {
@@ -273,6 +274,20 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
         this._restoreFocus();
       }
     });
+
+    /**
+     * Runs outside the zone the 'keydown' event listener. This avoids change detector to be fired
+     * on 'any' keydown event that is done inside the drawer. We just re-enters on the zone when
+     * the keyboard event is from the ESCAPE key and we don't have the close disabled.
+     */
+    this._ngZone.runOutsideAngular(() => {
+        fromEvent(this._elementRef.nativeElement, 'keydown').pipe(
+            filter((event: KeyboardEvent) => event.keyCode === ESCAPE && !this.disableClose)
+        ).subscribe((event) => this._ngZone.run(() => {
+            this.close();
+            event.stopPropagation();
+        }));
+    });
   }
 
   /** Traps focus inside the drawer. */
@@ -382,17 +397,6 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
     });
   }
 
-  /**
-   * Handles the keyboard events.
-   * @docs-private
-   */
-  handleKeydown(event: KeyboardEvent): void {
-    if (event.keyCode === ESCAPE && !this.disableClose) {
-      this.close();
-      event.stopPropagation();
-    }
-  }
-
   _onAnimationStart(event: AnimationEvent) {
     this._animationStarted.emit(event);
   }

src/lib/sidenav/sidenav.ts

@@ -57,7 +57,6 @@ export class MatSidenavContent extends MatDrawerContent {
     '[@transform]': '_animationState',
     '(@transform.start)': '_onAnimationStart($event)',
     '(@transform.done)': '_onAnimationEnd($event)',
-    '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',