feat(dialog): add result to MdDialogClose directive (#4332)

MdDialog has MdDialogClose to make it easier to structure a dialog.
But as MdDialogClose doesn't return any value, it's imposibble to use MdDialogClose if you want to get any return value when MdDialog is close.
So `@Input('md-dialog-close')result` is added to MdDialogClose to solve it.

no breaking changes

src/lib/dialog/dialog-content-directives.ts

@@ -8,7 +8,7 @@ import {MdDialogRef} from './dialog-ref';
 @Directive({
   selector: 'button[md-dialog-close], button[mat-dialog-close]',
   host: {
-    '(click)': 'dialogRef.close()',
+    '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
     'type': 'button', // Prevents accidental form submits.
   }
@@ -17,6 +17,12 @@ export class MdDialogClose {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string = 'Close dialog';
 
+  /** Dialog close input. */
+  @Input('md-dialog-close') dialogResult: any;
+
+  /** Dialog close input for compatibility mode. */
+  @Input('mat-dialog-close') set _matDialogClose(value: any) { this.dialogResult = value; }
+
   constructor(public dialogRef: MdDialogRef<any>) { }
 }
 

src/lib/dialog/dialog.md

@@ -56,12 +56,23 @@ export class YourDialog {
 ### Dialog content
 Several directives are available to make it easier to structure your dialog content:
 
-| Name                  | Description                                                              |
-|-----------------------|--------------------------------------------------------------------------|
-| `md-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)|
-| `<md-dialog-content>` | Primary scrollable content of the dialog                                 |
-| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog                 |
-| `md-dialog-close`     | \[Attr] Added to a `<button>`, makes the button close the dialog on click|
+| Name                  | Description                                                                                                   |
+|-----------------------|---------------------------------------------------------------------------------------------------------------|
+| `md-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)                                     |
+| `<md-dialog-content>` | Primary scrollable content of the dialog                                                                      |
+| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog                                                      |
+| `md-dialog-close`     | \[Attr] Added to a `<button>`, makes the button close the dialog with an optional result from the bound value.|
+
+For example:
+```html
+<h2 md-dialog-title>Delete all</h2>
+<md-dialog-content>Are you sure?</md-dialog-content>
+<md-dialog-actions>
+  <button md-button md-dialog-close>No</button>
+  <!-- Can optionally provide a result for the closing dialog. -->
+  <button md-button [md-dialog-close]="true">Yes</button>
+</md-dialog-actions>
+```
 
 Once a dialog opens, the dialog will automatically focus the first tabbable element.
 

src/lib/dialog/dialog.spec.ts

@@ -600,6 +600,18 @@ describe('MdDialog', () => {
       expect(button.getAttribute('type')).toBe('button');
     });
 
+    it('should return the [md-dialog-close] result when clicking on the close button', async(() => {
+      let afterCloseCallback = jasmine.createSpy('afterClose callback');
+      dialogRef.afterClosed().subscribe(afterCloseCallback);
+
+      (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
+      viewContainerFixture.detectChanges();
+
+      viewContainerFixture.whenStable().then(() => {
+        expect(afterCloseCallback).toHaveBeenCalledWith(true);
+      });
+    }));
+
   });
 });
 
@@ -714,6 +726,7 @@ class PizzaMsg {
     <md-dialog-content>Lorem ipsum dolor sit amet.</md-dialog-content>
     <md-dialog-actions>
       <button md-dialog-close [aria-label]="closeButtonAriaLabel">Close</button>
+      <button class="close-with-true" [md-dialog-close]="true">Close and return true</button>
       <div md-dialog-close>Should not close</div>
     </md-dialog-actions>
   `

src/material-examples/dialog-result/dialog-result-example-dialog.html

@@ -1,6 +1,6 @@
 <h1 md-dialog-title>Dialog</h1>
 <div md-dialog-content>What would you like to do?</div>
 <div md-dialog-actions>
-  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
-  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
+  <button md-button md-dialog-close="Option 1">Option 1</button>
+  <button md-button md-dialog-close="Option 2">Option 2</button>
 </div>