API reference for Angular CDK dialog
import {DialogModule} from '@angular/cdk/dialog';
Services
Dialog
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 | |
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>
|
|
Classes
DialogConfig
Configuration for opening a modal dialog.
Properties
Name | Description |
---|---|
|
ID of the element that describes the dialog. |
|
Dialog label applied via |
|
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. |
|
Optional CSS class or classes applied to the overlay backdrop. |
|
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. |
|
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 ( |
|
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. |
|
Component into which the dialog content will be rendered. Defaults to |
|
Data being injected into the child component. |
|
Layout direction for the dialog's content. |
|
Whether the dialog closes with the escape key or pointer events outside the panel element. |
|
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. |
|
Optional CSS class or classes applied to the overlay panel. |
|
Strategy to use when positioning the dialog. Defaults to centering it on the page. |
|
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. |
|
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:
|
|
The ARIA role of the dialog element. |
|
Scroll strategy to be used for the dialog. This determines how the dialog responds to scrolling underneath the panel element. |
|
Context that will be passed to template-based dialogs. A function can be passed in to resolve the context lazily. |
|
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 |
DialogRef
Reference to a dialog opened via the Dialog service.
Properties
Name | Description |
---|---|
|
Emits when the backdrop of the dialog is clicked. |
|
Emits when the dialog has been closed. |
|
Instance of component opened into the dialog. Will be
null when the dialog is opened using a |
|
|
|
|
|
Instance of the container that is rendering out the dialog content. |
|
Whether the user is allowed to close the dialog. |
|
Unique ID for the dialog. |
|
Emits when on keyboard events within the dialog. |
|
Emits on pointer events that happen outside of the dialog. |
|
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
|
|
Interfaces
DialogCloseOptions
Additional options that can be passed in when closing a dialog.
Properties
Name | Description |
---|---|
|
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';
DialogRole
Valid ARIA roles for a dialog.
type DialogRole = 'dialog' | 'alertdialog';
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<any>;
DEFAULT_DIALOG_CONFIG
Injection token that can be used to provide default options for the dialog module.
const DEFAULT_DIALOG_CONFIG: InjectionToken<DialogConfig<unknown, unknown, BasePortalOutlet>>;