feat(dialog): add beforeClose method (#6377)

Author: willshowell

src/demo-app/dialog/dialog-demo.html

@@ -75,7 +75,8 @@ <h2>Other options</h2>
   </md-card-content>
 </md-card>
 
-<p>Last close result: {{lastCloseResult}}</p>
+<p>Last afterClosed result: {{lastAfterClosedResult}}</p>
+<p>Last beforeClose result: {{lastBeforeCloseResult}}</p>
 
 <ng-template>
   I'm a template dialog. I've been opened {{numTemplateOpens}} times!

src/demo-app/dialog/dialog-demo.ts

@@ -11,7 +11,8 @@ import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
 })
 export class DialogDemo {
   dialogRef: MdDialogRef<JazzDialog> | null;
-  lastCloseResult: string;
+  lastAfterClosedResult: string;
+  lastBeforeCloseResult: string;
   actionsAlignment: string;
   config = {
     disableClose: false,
@@ -51,8 +52,11 @@ export class DialogDemo {
   openJazz() {
     this.dialogRef = this.dialog.open(JazzDialog, this.config);
 
+    this.dialogRef.beforeClose().subscribe((result: string) => {
+      this.lastBeforeCloseResult = result;
+    });
     this.dialogRef.afterClosed().subscribe((result: string) => {
-      this.lastCloseResult = result;
+      this.lastAfterClosedResult = result;
       this.dialogRef = null;
     });
   }

src/lib/dialog/dialog-ref.ts

@@ -15,7 +15,7 @@ import {MdDialogContainer} from './dialog-container';
 
 
 // TODO(jelbourn): resizing
-// TODO(jelbourn): afterOpen and beforeClose
+// TODO(jelbourn): afterOpen
 
 // Counter for unique dialog ids.
 let uniqueId = 0;
@@ -33,6 +33,9 @@ export class MdDialogRef<T> {
   /** Subject for notifying the user that the dialog has finished closing. */
   private _afterClosed: Subject<any> = new Subject();
 
+  /** Subject for notifying the user that the dialog has started closing. */
+  private _beforeClose: Subject<any> = new Subject();
+
   /** Result to be passed to afterClosed. */
   private _result: any;
 
@@ -63,7 +66,11 @@ export class MdDialogRef<T> {
     RxChain.from(this._containerInstance._animationStateChanged)
       .call(filter, event => event.phaseName === 'start')
       .call(first)
-      .subscribe(() => this._overlayRef.detachBackdrop());
+      .subscribe(() => {
+        this._beforeClose.next(dialogResult);
+        this._beforeClose.complete();
+        this._overlayRef.detachBackdrop();
+      });
 
     this._containerInstance._startExitAnimation();
   }
@@ -75,6 +82,13 @@ export class MdDialogRef<T> {
     return this._afterClosed.asObservable();
   }
 
+  /**
+   * Gets an observable that is notified when the dialog has started closing.
+   */
+  beforeClose(): Observable<any> {
+    return this._beforeClose.asObservable();
+  }
+
   /**
    * Updates the dialog's position.
    * @param position New dialog position.

src/lib/dialog/dialog.spec.ts

@@ -140,6 +140,25 @@ describe('MdDialog', () => {
     });
   }));
 
+  it('should close a dialog and get back a result before it is closed', async(() => {
+    const dialogRef = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
+
+    // beforeClose should emit before dialog container is destroyed
+    const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
+      expect(overlayContainerElement.querySelector('md-dialog-container'))
+          .not.toBeNull('dialog container exists when beforeClose is called');
+    });
+
+    dialogRef.beforeClose().subscribe(beforeCloseHandler);
+    dialogRef.close('Bulbasaurus');
+    viewContainerFixture.detectChanges();
+
+    viewContainerFixture.whenStable().then(() => {
+      expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaurus');
+      expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull();
+    });
+  }));
+
   it('should close a dialog via the escape key', async(() => {
     dialog.open(PizzaMsg, {
       viewContainerRef: testViewContainerRef