Dialog

API for dialog

API reference for Angular Material dialog

import {MatDialogModule} from '@angular/material/dialog';

Service to open Material Design modal dialogs.

Properties
NameDescription

afterAllClosed: Observable<void>

Stream that emits when all open dialog have finished closing. Will emit on subscribe if there are no open dialogs to begin with.

afterOpen: Subject<MatDialogRef<any>>

Stream that emits when a dialog has been opened.

openDialogs: MatDialogRef<any>[]

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

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.

Button that will close the current dialog.

Selector: button[mat-dialog-close] button[matDialogClose]

Exported as: matDialogClose
Properties
NameDescription
@Input('aria-label')

ariaLabel: string

Screenreader label for the button.

@Input('mat-dialog-close')

dialogResult: any

Dialog close input.

dialogRef: MatDialogRef<any>

Title of a dialog element. Stays fixed to the top of the dialog when scrolling.

Selector: [mat-dialog-title] [matDialogTitle]

Exported as: matDialogTitle
Properties
NameDescription
@Input()

id: `mat-dialog-title-${dialogElementUid++}`

Scrollable content container of a dialog.

Selector: [mat-dialog-content] mat-dialog-content [matDialogContent]

Container for the bottom action buttons in a dialog. Stays fixed to the bottom when scrolling.

Selector: [mat-dialog-actions] mat-dialog-actions [matDialogActions]

Configuration for opening a modal dialog with the MatDialog service.

Properties
NameDescription

ariaDescribedBy: string | null

ID of the element that describes the dialog.

ariaLabel: string | null

Aria label to assign to the dialog element

autoFocus: boolean

Whether the dialog should focus the first focusable element on open.

backdropClass: string

Custom class for the backdrop,

closeOnNavigation: boolean

Whether the dialog should close when the user goes backwards/forwards in history.

data: D | null

Data being injected into the child component.

direction: Direction

Layout direction for the dialog's content.

disableClose: boolean

Whether the user can use escape or clicking on the backdrop to close the modal.

hasBackdrop: boolean

Whether the dialog has a backdrop.

height: string

Height of the dialog.

id: string

ID for the dialog. If omitted, a unique one will be generated.

maxHeight: number | string

Max-height of the dialog. If a number is provided, pixel units are assumed.

maxWidth: number | string

Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw

minHeight: number | string

Min-height of the dialog. If a number is provided, pixel units are assumed.

minWidth: number | string

Min-width of the dialog. If a number is provided, pixel units are assumed.

panelClass: string | string[]

Custom class for the overlay pane.

position: DialogPosition

Position overrides.

role: DialogRole

The ARIA role of the dialog element.

scrollStrategy: ScrollStrategy

Scroll strategy to be used for the dialog.

viewContainerRef: ViewContainerRef

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: string

Width of the dialog.

Reference to a dialog opened via the MatDialog service.

Properties
NameDescription

componentInstance: T

The instance of component opened into the dialog.

disableClose: boolean | undefined

Whether the user is allowed to close the dialog.

id: string

Methods
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

Possible overrides for a dialog's position.

Properties
NameDescription

bottom: string

Override for the dialog's bottom position.

left: string

Override for the dialog's left position.

right: string

Override for the dialog's right position.

top: string

Override for the dialog's top position.

Valid ARIA roles for a dialog element.

Type: 'dialog' | 'alertdialog'

Contents