API for dialog

API reference for Angular CDK dialog

import {DialogModule} from '@angular/cdk/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

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
DialogRef<R, C> | undefined

open

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

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
Parameters

componentOrTemplateRef

ComponentType<C> | TemplateRef<C>

config?

DialogConfig<D, DialogRef<R, C>, BasePortalOutlet>

Returns
DialogRef<R, C>

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.

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

Whether the dialog should close when the user navigates backwards or forwards through browser history. This does not apply to navigation via anchor element unless using URL-hash based routing (HashLocationStrategy in the Angular router).

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.

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.

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. 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[]

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

Whether the dialog should restore focus to the previously-focused element upon closing. Has the following behavior based on the type that is passed in:

  • 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.

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.

Deprecated

componentFactoryResolver: unknown

Alternate ComponentFactoryResolver to use when resolving the associated component.

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>, BasePortalOutlet>

containerInstance: BasePortalOutlet & { _closeInteractionType?: FocusOrigin; }

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

Add a CSS class or an array of classes to the overlay pane.

Parameters

classes

string | string[]

Returns
this

close

Close the dialog.

Parameters

result?

R

Optional result to return to the dialog opener.

options?

DialogCloseOptions

Additional options to customize the closing behavior.

removePanelClass

Remove a CSS class or an array of classes from the overlay pane.

Parameters

classes

string | string[]

Returns
this

updatePosition

Updates the position of the dialog based on the current position strategy.

Returns
this

updateSize

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

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

Properties
Name Description

focusOrigin: FocusOrigin

Focus original to use when restoring focus.

throwDialogContentAlreadyAttachedError

Options for where to set focus to automatically on dialog open

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

Valid ARIA roles for a dialog.

type DialogRole = 'dialog' | 'alertdialog';

Injection token for the Dialog's ScrollStrategy.

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

Injection token for the Dialog's Data.

const DIALOG_DATA: InjectionToken<any>;

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

const DEFAULT_DIALOG_CONFIG: InjectionToken<DialogConfig<unknown, unknown, BasePortalOutlet>>;
Azure & Blue theme selected.