create event for ESCAPE keydown

Author: jwshinjwshin

src/lib/sidenav/drawer.spec.ts

@@ -102,6 +102,18 @@ describe('MdDrawer', () => {
       expect(testComponent.backdropClickedCount).toBe(1);
     }));
 
+    it('should emit the escapeKeydown event when ESCAPE key is pressed', () => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let drawer = fixture.debugElement.query(By.directive(MdDrawer));
+      expect(testComponent.escapeKeydownCount).toBe(0);
+
+      dispatchKeyboardEvent(drawer.nativeElement, 'keydown', ESCAPE);
+      fixture.detectChanges();
+
+      expect(testComponent.escapeKeydownCount).toBe(1);
+    });
+
     it('should close when pressing escape', fakeAsync(() => {
       let fixture = TestBed.createComponent(BasicTestApp);
 
@@ -386,7 +398,8 @@ class DrawerContainerTwoDrawerTestApp {
     <md-drawer-container (backdropClick)="backdropClicked()">
       <md-drawer #drawer position="start"
                  (open)="open()"
-                 (close)="close()">
+                 (close)="close()"
+                 (escapeKeydown)="escapeKeydown()">
         <button #drawerButton>Content.</button>
       </md-drawer>
       <button (click)="drawer.open()" class="open" #openButton></button>
@@ -397,6 +410,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeCount: number = 0;
   backdropClickedCount: number = 0;
+  escapeKeydownCount: number = 0;
 
   @ViewChild('drawerButton') drawerButton: ElementRef;
   @ViewChild('openButton') openButton: ElementRef;
@@ -413,6 +427,10 @@ class BasicTestApp {
   backdropClicked() {
     this.backdropClickedCount++;
   }
+
+  escapeKeydown() {
+    this.escapeKeydownCount++;
+  }
 }
 
 @Component({

src/lib/sidenav/drawer.ts

@@ -118,7 +118,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   /** Mode of the drawer; one of 'over', 'push' or 'side'. */
   @Input() mode: 'over' | 'push' | 'side' = 'over';
 
-  /** Whether the drawer can be closed with the escape key or not. */
+  /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */
   @Input()
   get disableClose(): boolean { return this._disableClose; }
   set disableClose(value: boolean) { this._disableClose = coerceBooleanProperty(value); }
@@ -152,6 +152,9 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   /** Event emitted when the drawer's position changes. */
   @Output('positionChanged') onPositionChanged = new EventEmitter<void>();
 
+  /** Event emitted when ESCAPE is pressed. */
+  @Output() escapeKeydown = new EventEmitter<void>();
+
   /** @deprecated */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
 
@@ -259,9 +262,12 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
    * @docs-private
    */
   handleKeydown(event: KeyboardEvent) {
-    if (event.keyCode === ESCAPE && !this.disableClose) {
-      this.close();
-      event.stopPropagation();
+    if (event.keyCode === ESCAPE) {
+      this.escapeKeydown.emit();
+      if (!this.disableClose) {
+        this.close();
+        event.stopPropagation();
+      }
     }
   }