API for dialog

API reference for Angular Material dialog

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

Service to open Material Design modal dialogs.

Properties
Name Description

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.

afterOpened: Subject<MatDialogRef<any>>

Stream that emits when a dialog has been opened.

dialogConfigClass: MatDialogConfig

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

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>

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()

align: 'start' | 'center' | 'end'

Horizontal alignment of action buttons.

Button that will close the current dialog.

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

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

ariaLabel: string

Screen-reader label for the button.

@Input('mat-dialog-close')

dialogResult: any

Dialog close input.

@Input()

type: 'submit' | 'button' | 'reset'

Default to "button" to prevents accidental form submits.

dialogRef: inject<MatDialogRef<any>>(MatDialogRef, { optional: true })!

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

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

Exported as: matDialogTitle
Properties
Name Description
@Input()

id: string

Scrollable content container of a dialog.

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

Selector: mat-dialog-container

Properties
Name Description
Deprecated

attachDomPortal: (portal: DomPortal) => { if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) { throwDialogContentAlreadyAttachedError(); } const result = this._portalOutlet.attachDomPortal(portal); this._contentAttached(); return result; }

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

Configuration for opening a modal dialog with the MatDialog service.

Properties
Name Description

ariaDescribedBy: string | null

ID of the element that describes the dialog.

ariaLabel: string | null

Aria label to assign to the dialog element.

ariaLabelledBy: string | null

ID of the element that labels the dialog.

ariaModal: boolean

Whether this is a modal dialog. Used to set the aria-modal attribute. Off by default, because it can interfere with other overlay-based components (e.g. mat-select) and because it is redundant since the dialog marks all outside content as aria-hidden anyway.

autoFocus: AutoFocusTarget | string | boolean

Where the dialog should focus on open.

backdropClass: string | string[]

Custom class for the backdrop.

closeOnNavigation: boolean

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 HashLocationStrategy).

data: D | null

Data being injected into the child component.

delayFocusTrap: boolean

Whether to wait for the opening animation to finish before trapping focus.

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.

enterAnimationDuration: string | number

Duration of the enter animation in ms. Should be a number, string type is deprecated.

exitAnimationDuration: string | number

Duration of the exit animation in ms. Should be a number, string type is deprecated.

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.

injector: Injector

Injector used for the instantiation of the component to be attached. If provided, takes precedence over the injector indirectly provided by ViewContainerRef.

maxHeight: number | string

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

maxWidth: number | string

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

minHeight: number | string

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

minWidth: number | string

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

panelClass: string | string[]

Custom class for the overlay pane.

position: DialogPosition

Position overrides.

restoreFocus: boolean

Whether the dialog should restore focus to the previously-focused element, after it's closed.

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.

Deprecated

componentFactoryResolver: unknown

Alternate ComponentFactoryResolver to use when resolving the associated component.

Reference to a dialog opened via the MatDialog service.

Properties
Name Description

componentInstance: T

The instance of component opened into the dialog.

componentRef: ComponentRef<T> | null

ComponentRef of the component opened into the dialog. Will be null when the dialog is opened using a TemplateRef.

disableClose: boolean | undefined

Whether the user is allowed to close the dialog.

id: string

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

Possible overrides for a dialog's position.

Properties
Name Description

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.

Options for where to set focus to automatically on dialog open

type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';

Valid ARIA roles for a dialog element.

type DialogRole = 'dialog' | 'alertdialog';

Injection token that can be used to access the data that was passed in to a dialog.

const MAT_DIALOG_DATA: InjectionToken<any>;

Injection token that can be used to specify default dialog options.

const MAT_DIALOG_DEFAULT_OPTIONS: InjectionToken<MatDialogConfig<any>>;

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';

Test component that immediately opens a dialog when bootstrapped.

Selector: mat-test-dialog-opener

Properties
Name Description

closedResult: R | undefined

Data passed to the MatDialog close method.

static component: ComponentType<unknown> | undefined

Component that should be opened with the MatDialog open method.

static config: MatDialogConfig | undefined

Config that should be provided to the MatDialog open method.

dialog: inject(MatDialog)

dialogRef: MatDialogRef<T, R>

MatDialogRef returned from the MatDialog open method.

Methods
static
withComponent

Static method that prepares this class to open the provided component.

Parameters

component

ComponentType<T>

config?

MatDialogConfig<any>

Harness for interacting with a standard MatDialog in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-dialog-container'

The selector for the host element of a MatDialog instance.

Methods
async
close

Closes the dialog by pressing escape.

Note: this method does nothing if disableClose has been set to true for the dialog.

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 Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

static
with

Gets a HarnessPredicate that can be used to search for a dialog with specific attributes.

Parameters

options

DialogHarnessFilters = {}

Options for filtering which dialog instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatDialogHarness instances.

Azure & Blue theme selected.