Dialog • Angular Material

API reference for Angular CDK dialog

import {DialogModule} from '@angular/cdk/dialog';

Services

`Dialog`

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<DialogRef<any, any>>`	Stream that emits when a dialog has been opened.
`openDialogs: readonly DialogRef<any, any>[]`	Keeps track of the currently-open dialogs.

Methods

closeAll (): `void`
Closes all of the currently-open dialogs.

getDialogById (id: `string`): `DialogRef<R, C> \| undefined`
Finds an open dialog by its id.
Parameters
id `string`	ID to use when looking up the dialog.
Returns
`DialogRef<R, C> \| undefined`

open (component: `ComponentType<C>`, config?: `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`): `DialogRef<R, C>`
Opens a modal dialog containing the given component.
Parameters
component `ComponentType<C>`	Type of the component to load into the dialog.
config? `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`	Extra configuration options.
Returns
`DialogRef<R, C>`	Reference to the newly-opened dialog.

open (template: `TemplateRef<C>`, config?: `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`): `DialogRef<R, C>`
Opens a modal dialog containing the given template.
Parameters
template `TemplateRef<C>`	TemplateRef to instantiate as the dialog content.
config? `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`	Extra configuration options.
Returns
`DialogRef<R, C>`	Reference to the newly-opened dialog.

open (componentOrTemplateRef: `ComponentType<C> \| TemplateRef<C>`, config?: `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`): `DialogRef<R, C>`
Parameters
componentOrTemplateRef `ComponentType<C> \| TemplateRef<C>`
config? `DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>`
Returns
`DialogRef<R, C>`

Classes

`DialogConfig`

Configuration for opening a modal dialog.

Properties

Name	Description
`ariaDescribedBy: string \| null`	ID of the element that describes the dialog.
`ariaLabel: string \| null`	Dialog label applied via `aria-label`
`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[]`	Optional CSS class or classes applied to the overlay backdrop.
`bindings: Binding[]`	Bindings to apply to the component rendered inside the dialog. Does nothing for template-based dialogs.
`closeOnDestroy: boolean`	Whether the dialog should close when the dialog service is destroyed. This is useful if another service is wrapping the dialog and is managing the destruction instead.
`closeOnNavigation: OverlayDisposeOnNavigation`	Whether the dialog should be disposed of when the user navigates.
`closeOnOverlayDetachments: boolean`	Whether the dialog should close when the underlying overlay is detached. This is useful if another service is wrapping the dialog and is managing the destruction instead. E.g. an external detachment can happen as a result of a scroll strategy triggering it or when the browser location changes.
`closePredicate: <Result = unknown, Component = unknown, Config extends DialogConfig = DialogConfig>(result: Result \| undefined, config: Config, componentInstance: Component \| null) => boolean`	Function used to determine whether the dialog is allowed to close.
`container: Type<C> \| { type: Type<C>; providers: (config: DialogConfig<D, R, C>) => StaticProvider[]; }`	Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`. A configuration object can be passed in to customize the providers that will be exposed to the dialog container.
`data: D \| null`	Data being injected into the child component.
`direction: Direction`	Layout direction for the dialog's content.
`disableAnimations: boolean`	Whether the built-in overlay animations should be disabled.
`disableClose: boolean`	Whether the dialog closes with the escape key or pointer events outside the panel element.
`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.
`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[]`	Optional CSS class or classes applied to the overlay panel.
`positionStrategy: PositionStrategy`	Strategy to use when positioning the dialog. Defaults to centering it on the page.
`providers: StaticProvider[] \| ((dialogRef: R, config: DialogConfig<D, R, C>, container: C) => StaticProvider[])`	Providers that will be exposed to the contents of the dialog. Can also be provided as a function in order to generate the providers lazily.
`restoreFocus: RestoreFocusValue`	Configures the focus restoration behavior. See `RestoreFocusValue` for more information.
`role: DialogRole`	The ARIA role of the dialog element.
`scrollStrategy: ScrollStrategy`	Scroll strategy to be used for the dialog. This determines how the dialog responds to scrolling underneath the panel element.
`templateContext: Record<string, any> \| (() => Record<string, any>)`	Context that will be passed to template-based dialogs. A function can be passed in to resolve the context lazily.
`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.

`DialogRef`

Reference to a dialog opened via the Dialog service.

Properties

Name	Description
`backdropClick: Observable<MouseEvent>`	Emits when the backdrop of the dialog is clicked.
`closed: Observable<R \| undefined>`	Emits when the dialog has been closed.
`componentInstance: C \| null`	Instance of component opened into the dialog. Will be null when the dialog is opened using a `TemplateRef`.
`componentRef: ComponentRef<C> \| null`	`ComponentRef` of the component opened into the dialog. Will be null when the dialog is opened using a `TemplateRef`.
`config: DialogConfig<any, DialogRef<R, C>, DialogContainer>`
`containerInstance: DialogContainer`	Instance of the container that is rendering out the dialog content.
`disableClose: boolean \| undefined`	Whether the user is allowed to close the dialog.
`id: string`	Unique ID for the dialog.
`keydownEvents: Observable<KeyboardEvent>`	Emits when on keyboard events within the dialog.
`outsidePointerEvents: Observable<MouseEvent>`	Emits on pointer events that happen outside of the dialog.
`overlayRef: OverlayRef`

Methods

addPanelClass (classes: `string \| string[]`): `this`
Add a CSS class or an array of classes to the overlay pane.
Parameters
classes `string \| string[]`
Returns
`this`

close (result?: `R`, options?: `DialogCloseOptions`): `void`
Close the dialog.
Parameters
result? `R`	Optional result to return to the dialog opener.
options? `DialogCloseOptions`	Additional options to customize the closing behavior.

removePanelClass (classes: `string \| string[]`): `this`
Remove a CSS class or an array of classes from the overlay pane.
Parameters
classes `string \| string[]`
Returns
`this`

updatePosition (): `this`
Updates the position of the dialog based on the current position strategy.
Returns
`this`

updateSize (width: `string \| number = ''`, height: `string \| number = ''`): `this`
Updates the dialog's width and height.
Parameters
width `string \| number = ''`	New width of the dialog.
height `string \| number = ''`	New height of the dialog.
Returns
`this`

Interfaces

`DialogCloseOptions`

Additional options that can be passed in when closing a dialog.

Properties

Name	Description
`focusOrigin: FocusOrigin`	Focus original to use when restoring focus.

Functions

throwDialogContentAlreadyAttachedError ():

Type aliases

`AutoFocusTarget`

Options for where to set focus to automatically on dialog open

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

`RestoreFocusValue`

Value that determines the focus restoration behavior for a dialog. The values represent the following behaviors:

boolean - when true, will return focus to the element that was focused before the dialog was opened, otherwise won't restore focus at all.
string - focus will be restored to the first element that matches the CSS selector.
HTMLElement - focus will be restored to the specific element.

type RestoreFocusValue = boolean | string | HTMLElement;

`DialogRole`

Valid ARIA roles for a dialog.

type DialogRole = 'dialog' | 'alertdialog';

`DialogContainer`

Component that can be used as the container for the dialog.

type DialogContainer = BasePortalOutlet & {
    _focusTrapped?: Observable;
    _closeInteractionType?: FocusOrigin;
    _recaptureFocus?: () => void;
};

Constants

`DIALOG_SCROLL_STRATEGY`

Injection token for the Dialog's ScrollStrategy.

const DIALOG_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

`DIALOG_DATA`

Injection token for the Dialog's Data.

const DIALOG_DATA: InjectionToken;

`DEFAULT_DIALOG_CONFIG`

Injection token that can be used to provide default options for the dialog module.

const DEFAULT_DIALOG_CONFIG: InjectionToken>;

API reference for Angular CDK dialog

Services link

Dialog link

Properties

Methods

Classes link

DialogConfig link

Properties

DialogRef link

Properties

Methods

Interfaces link

DialogCloseOptions link

Properties

Functions link

Type aliases link

AutoFocusTarget link

RestoreFocusValue link

DialogRole link

DialogContainer link

Constants link

DIALOG_SCROLL_STRATEGY link

DIALOG_DATA link

DEFAULT_DIALOG_CONFIG link

Services

`Dialog`

Classes

`DialogConfig`

`DialogRef`

Interfaces

`DialogCloseOptions`

Functions

Type aliases

`AutoFocusTarget`

`RestoreFocusValue`

`DialogRole`

`DialogContainer`

Constants

`DIALOG_SCROLL_STRATEGY`

`DIALOG_DATA`

`DEFAULT_DIALOG_CONFIG`