Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/lib/dialog/dialog-content-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
}
Expand All @@ -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>) { }
}

Expand Down
23 changes: 17 additions & 6 deletions src/lib/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
13 changes: 13 additions & 0 deletions src/lib/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}));

});
});

Expand Down Expand Up @@ -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>
`
Expand Down
Original file line number Diff line number Diff line change
@@ -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>