import {MatDialogModule} from '@angular/material/dialog';
MatDialog
Service to open Material Design modal dialogs.
Name | Description |
---|---|
| Stream that emits when all open dialog have finished closing. Will emit on subscribe if there are no open dialogs to begin with. |
| Stream that emits when a dialog has been opened. |
| Keeps track of the currently-open dialogs. |
closeAll | |
---|---|
Closes all of the currently-open dialogs. |
getDialogById | |
---|---|
Finds an open dialog by its id. | |
Parameters | |
id string | ID to use when looking up the dialog. |
Returns | |
MatDialogRef<any> | undefined |
open | |
---|---|
Opens a modal dialog containing the given component. | |
Parameters | |
componentOrTemplateRef ComponentType<T> | TemplateRef<T> | Type of the component to load into the dialog, or a TemplateRef to instantiate as the dialog content. |
config? MatDialogConfig<D> | Extra configuration options. |
Returns | |
MatDialogRef<T, R> | Reference to the newly-opened dialog. |
MatDialogClose
Button that will close the current dialog.
Selector: button[mat-dialog-close] button[matDialogClose]
Exported as: matDialogCloseName | Description |
---|---|
@Input('aria-label')
| Screenreader label for the button. |
@Input('mat-dialog-close')
| Dialog close input. |
|
MatDialogTitle
Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
Selector: [mat-dialog-title] [matDialogTitle]
Exported as: matDialogTitleName | Description |
---|---|
@Input()
|
MatDialogContent
Scrollable content container of a dialog.
Selector: [mat-dialog-content] mat-dialog-content [matDialogContent]
MatDialogActions
Container for the bottom action buttons in a dialog. Stays fixed to the bottom when scrolling.
Selector: [mat-dialog-actions] mat-dialog-actions [matDialogActions]
MatDialogConfig
Configuration for opening a modal dialog with the MatDialog service.
Name | Description |
---|---|
| ID of the element that describes the dialog. |
| Aria label to assign to the dialog element |
| Whether the dialog should focus the first focusable element on open. |
| Custom class for the backdrop, |
| Whether the dialog should close when the user goes backwards/forwards in history. |
| Data being injected into the child component. |
| Layout direction for the dialog's content. |
| Whether the user can use escape or clicking on the backdrop to close the modal. |
| Whether the dialog has a backdrop. |
| Height of the dialog. |
| ID for the dialog. If omitted, a unique one will be generated. |
| Max-height of the dialog. If a number is provided, pixel units are assumed. |
| Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw |
| Min-height of the dialog. If a number is provided, pixel units are assumed. |
| Min-width of the dialog. If a number is provided, pixel units are assumed. |
| Custom class for the overlay pane. |
| Position overrides. |
| The ARIA role of the dialog element. |
| Scroll strategy to be used for the dialog. |
| Where the attached component should live in Angular's logical component tree. This affects what is available for injection and the change detection order for the component instantiated inside of the dialog. This does not affect where the dialog content will be rendered. |
| Width of the dialog. |
MatDialogRef
Reference to a dialog opened via the MatDialog service.
Name | Description |
---|---|
| The instance of component opened into the dialog. |
| Whether the user is allowed to close the dialog. |
|
afterClosed | |
---|---|
Gets an observable that is notified when the dialog is finished closing. | |
Returns | |
Observable<R | undefined> |
afterOpen | |
---|---|
Gets an observable that is notified when the dialog is finished opening. | |
Returns | |
Observable<void> |
backdropClick | |
---|---|
Gets an observable that emits when the overlay's backdrop has been clicked. | |
Returns | |
Observable<MouseEvent> |
beforeClose | |
---|---|
Gets an observable that is notified when the dialog has started closing. | |
Returns | |
Observable<R | undefined> |
close | |
---|---|
Close the dialog. | |
Parameters | |
dialogResult? R | Optional result to return to the dialog opener. |
keydownEvents | |
---|---|
Gets an observable that emits when keydown events are targeted on the overlay. | |
Returns | |
Observable<KeyboardEvent> |
updatePosition | |
---|---|
Updates the dialog's position. | |
Parameters | |
position? DialogPosition | New dialog position. |
Returns | |
this |
updateSize | |
---|---|
Updates the dialog's width and height. | |
Parameters | |
width string = '' | New width of the dialog. |
height string = '' | New height of the dialog. |
Returns | |
this |
DialogPosition
Possible overrides for a dialog's position.
Name | Description |
---|---|
| Override for the dialog's bottom position. |
| Override for the dialog's left position. |
| Override for the dialog's right position. |
| Override for the dialog's top position. |
DialogRole
Valid ARIA roles for a dialog element.
Type: 'dialog' | 'alertdialog'