API reference for Angular Material dialog
import {MatDialogModule} from '@angular/material/dialog';
Services
MatDialog
Service to open Material Design modal dialogs.
Properties
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. |
Methods
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 | |
component ComponentType<T>
|
Type of the component to load into the dialog. |
config? MatDialogConfig<D>
|
Extra configuration options. |
Returns | |
MatDialogRef<T, R>
|
Reference to the newly-opened dialog. |
open | |
---|---|
Opens a modal dialog containing the given template. |
|
Parameters | |
template TemplateRef<T>
|
TemplateRef to instantiate as the dialog content. |
config? MatDialogConfig<D>
|
Extra configuration options. |
Returns | |
MatDialogRef<T, R>
|
Reference to the newly-opened dialog. |
open | |
---|---|
Parameters | |
template ComponentType<T> | TemplateRef<T>
|
|
config? MatDialogConfig<D>
|
|
Returns | |
MatDialogRef<T, R>
|
|
Directives
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]
Properties
Name | Description |
---|---|
@Input()
|
Horizontal alignment of action buttons. |
MatDialogClose
Button that will close the current dialog.
Selector: [mat-dialog-close] [matDialogClose]
Exported as: matDialogCloseProperties
Name | Description |
---|---|
@Input('aria-label')
|
Screen-reader label for the button. |
@Input('mat-dialog-close')
|
Dialog close input. |
@Input()
|
Default to "button" to prevents accidental form submits. |
|
MatDialogTitle
Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
Selector: [mat-dialog-title] [matDialogTitle]
Exported as: matDialogTitleProperties
Name | Description |
---|---|
@Input()
|
MatDialogContent
Scrollable content container of a dialog.
Selector: [mat-dialog-content] mat-dialog-content [matDialogContent]
MatDialogContainer
Selector: mat-dialog-container
Properties
Name | Description |
---|---|
Deprecated
|
Attaches a DOM portal to the dialog container. |
Methods
attach | |
---|---|
Parameters | |
portal ComponentPortal<T>
|
|
Returns | |
ComponentRef<T>
|
|
attach | |
---|---|
Parameters | |
portal TemplatePortal<T>
|
|
Returns | |
EmbeddedViewRef<T>
|
|
attach | |
---|---|
Parameters | |
portal any
|
|
Returns | |
any
|
|
attachComponentPortal | |
---|---|
Parameters | |
portal ComponentPortal<T>
|
|
Returns | |
ComponentRef<T>
|
|
attachTemplatePortal | |
---|---|
Attach a TemplatePortal as content to this dialog container. |
|
Parameters | |
portal TemplatePortal<T>
|
Portal to be attached as the dialog content. |
Returns | |
EmbeddedViewRef<T>
|
|
detach | |
---|---|
Detaches a previously attached portal. |
dispose | |
---|---|
Permanently dispose of this portal host. |
hasAttached | |
---|---|
Whether this host has an attached portal. |
|
Returns | |
boolean
|
|
Classes
MatDialogConfig
Configuration for opening a modal dialog with the MatDialog service.
Properties
Name | Description |
---|---|
|
ID of the element that describes the dialog. |
|
Aria label to assign to the dialog element. |
|
ID of the element that labels the dialog. |
|
Whether this is a modal dialog. Used to set the |
|
Where the dialog should focus on open. |
|
Custom class for the backdrop. |
|
Whether the dialog should close when the user goes backwards/forwards in history.
Note that this usually doesn't include clicking on links (unless the user is using
the |
|
Data being injected into the child component. |
|
Whether to wait for the opening animation to finish before trapping focus. |
|
Layout direction for the dialog's content. |
|
Whether the user can use escape or clicking on the backdrop to close the modal. |
|
Duration of the enter animation in ms. Should be a number, string type is deprecated. |
|
Duration of the exit animation in ms. Should be a number, string type is deprecated. |
|
Whether the dialog has a backdrop. |
|
Height of the dialog. |
|
ID for the dialog. If omitted, a unique one will be generated. |
|
Injector used for the instantiation of the component to be attached. If provided,
takes precedence over the injector indirectly provided by |
|
Max-height of the dialog. If a number is provided, assumes pixel units. |
|
Max-width of the dialog. If a number is provided, assumes pixel units. Defaults to 80vw. |
|
Min-height of the dialog. If a number is provided, assumes pixel units. |
|
Min-width of the dialog. If a number is provided, assumes pixel units. |
|
Custom class for the overlay pane. |
|
Position overrides. |
|
Whether the dialog should restore focus to the previously-focused element, after it's closed. |
|
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. |
Deprecated
|
Alternate |
MatDialogRef
Reference to a dialog opened via the MatDialog service.
Properties
Name | Description |
---|---|
|
The instance of component opened into the dialog. |
|
|
|
Whether the user is allowed to close the dialog. |
|
Unique ID for the dialog. |
Methods
addPanelClass | |
---|---|
Add a CSS class or an array of classes to the overlay pane. |
|
Parameters | |
classes string | string[]
|
|
Returns | |
this
|
|
afterClosed | |
---|---|
Gets an observable that is notified when the dialog is finished closing. |
|
Returns | |
Observable<R | undefined>
|
|
afterOpened | |
---|---|
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>
|
|
beforeClosed | |
---|---|
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. |
getState | |
---|---|
Gets the current state of the dialog's lifecycle. |
|
Returns | |
MatDialogState
|
|
keydownEvents | |
---|---|
Gets an observable that emits when keydown events are targeted on the overlay. |
|
Returns | |
Observable<KeyboardEvent>
|
|
removePanelClass | |
---|---|
Remove a CSS class or an array of classes from the overlay pane. |
|
Parameters | |
classes string | string[]
|
|
Returns | |
this
|
|
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
|
|
Interfaces
DialogPosition
Possible overrides for a dialog's position.
Properties
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. |
Type aliases
AutoFocusTarget
Options for where to set focus to automatically on dialog open
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
DialogRole
Valid ARIA roles for a dialog element.
type DialogRole = 'dialog' | 'alertdialog';
Constants
MAT_DIALOG_DATA
Injection token that can be used to access the data that was passed in to a dialog.
const MAT_DIALOG_DATA: InjectionToken<any>;
MAT_DIALOG_DEFAULT_OPTIONS
Injection token that can be used to specify default dialog options.
const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;
MAT_DIALOG_SCROLL_STRATEGY
Injection token that determines the scroll handling while the dialog is open.
const MAT_DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
API reference for Angular Material dialog-testing
import {MatTestDialogOpenerModule} from '@angular/material/dialog/testing';
Directives
MatTestDialogOpener
Test component that immediately opens a dialog when bootstrapped.
Selector: mat-test-dialog-opener
Properties
Name | Description |
---|---|
|
Data passed to the |
|
Component that should be opened with the MatDialog |
|
Config that should be provided to the MatDialog |
|
|
|
MatDialogRef returned from the MatDialog |
Methods
static
withComponent
|
|
---|---|
Static method that prepares this class to open the provided component. |
|
Parameters | |
component ComponentType<T>
|
|
config? MatDialogConfig<any>
|
|
Classes
MatDialogHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard MatDialog
in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
close
|
|
---|---|
Closes the dialog by pressing escape. Note: this method does nothing if |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getActionsText
|
|
---|---|
Gets the dialog's actions text. This only works if the dialog is using mat-dialog-actions. |
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader[]>
|
|
async
getAllHarnesses
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T[]>
|
|
async
getAriaDescribedby
|
|
---|---|
Gets the value of the dialog's "aria-describedby" attribute. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabel
|
|
---|---|
Gets the value of the dialog's "aria-label" attribute. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets the value of the dialog's "aria-labelledby" attribute. |
|
Returns | |
Promise<string | null>
|
|
async
getChildLoader
|
|
---|---|
Parameters | |
selector S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getContentText
|
|
---|---|
Gets the dialog's content text. This only works if the dialog is using mat-dialog-content. |
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getId
|
|
---|---|
Gets the id of the dialog. |
|
Returns | |
Promise<string | null>
|
|
async
getRole
|
|
---|---|
Gets the role of the dialog. |
|
Returns | |
Promise<DialogRole | null>
|
|
async
getText
|
|
---|---|
Gets te dialog's text. |
async
getTitleText
|
|
---|---|
Gets the dialog's title text. This only works if the dialog is using mat-dialog-title. |
async
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options DialogHarnessFilters = {}
|
Options for filtering which dialog instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
DialogHarnessFilters
A set of criteria that can be used to filter a list of MatDialogHarness
instances.