feat(sidenav): emit event when backdrop is clicked

This allows clients to distinguish between close events caused by
calling close() and those caused by the backdrop being clicked.

Closes angular#1427

src/lib/sidenav/sidenav.spec.ts

@@ -194,6 +194,49 @@ describe('MdSidenav', () => {
         tick();
       }).not.toThrow();
     }));
+
+    it('should emit the backdrop-clicked event when the backdrop is clicked', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let openButtonElement = fixture.debugElement.query(By.css('.open'));
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(0);
+
+      let sidenavBackdropElement = fixture.debugElement.query(By.css('.md-sidenav-backdrop'));
+      sidenavBackdropElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+
+      endSidenavTransition(fixture);
+      tick();
+
+      openButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      let closeButtonElement = fixture.debugElement.query(By.css('.close'));
+      closeButtonElement.nativeElement.click();
+      fixture.detectChanges();
+      tick();
+
+      endSidenavTransition(fixture);
+      tick();
+
+      expect(testComponent.backdropClickedCount).toBe(1);
+    }));
+
   });
 
   describe('attributes', () => {
@@ -271,7 +314,7 @@ class SidenavLayoutTwoSidenavTestApp { }
 /** Test component that contains an MdSidenavLayout and one MdSidenav. */
 @Component({
   template: `
-    <md-sidenav-layout>
+    <md-sidenav-layout (backdrop-clicked)="backdropClicked()">
       <md-sidenav #sidenav align="start"
                   (open-start)="openStart()"
                   (open)="open()"
@@ -288,6 +331,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeStartCount: number = 0;
   closeCount: number = 0;
+  backdropClickedCount: number = 0;
 
   openStart() {
     this.openStartCount++;
@@ -304,6 +348,10 @@ class BasicTestApp {
   close() {
     this.closeCount++;
   }
+
+  backdropClicked() {
+    this.backdropClickedCount++;
+  }
 }
 
 @Component({

src/lib/sidenav/sidenav.ts

@@ -293,6 +293,9 @@ export class MdSidenavLayout implements AfterContentInit {
   get start() { return this._start; }
   get end() { return this._end; }
 
+  /** Event emitted when the sidenav backdrop is clicked. */
+  @Output('backdrop-clicked') onBackdropClicked = new EventEmitter<void>();
+
   /** The sidenav at the start/end alignment, independent of direction. */
   private _start: MdSidenav;
   private _end: MdSidenav;
@@ -398,6 +401,8 @@ export class MdSidenavLayout implements AfterContentInit {
   }
 
   _closeModalSidenav() {
+    this.onBackdropClicked.emit(null);
+
     if (this._start != null && this._start.mode != 'side') {
       this._start.close();
     }