Dialog

The mdcDialog directives can be used to create modal dialogs. Dialogs are typically used to inform users about tasks, and may require a user to take action or make a decision.

Dialog Demo

API

Directive: MdcDialogHeaderTitleDirective

Selector: [mdcDialogHeaderTitle]

Directive for the title of a dialog (mdcDialog). This should be used for the child of an element with the mdcDialogHeader directive.

Directive: MdcDialogHeaderDirective

Selector: [mdcDialogHeader]

Directive for the header of a dialog (mdcDialog). This should be used on the first child element of an mdcDialogSurface directive. Add the title of the dialog in a child element with the mdcDialogHeaderTitle directive.

Directive: MdcDialogBodyDirective

Selector: [mdcDialogBody]

Directive for the body part of a dialog (mdcDialog). This should be added to a child element of an mdcDialogSurface directive.

PropertyDescription
@Input()
scrollable
any

Set this property to true for dialog content that won't be able to fit the screen without scrolling. It will give the body a max-height, and thus (when necessary) will make the content scrollable. The max-height value that is applied can be overridden via the .mdc-dialog__body--scrollable selector in CSS.

Directive: MdcDialogFooterDirective

Selector: [mdcDialogFooter]

Directive for footer of a dialog (mdcDialog). This should be added to a child element of an mdcDialogSurface directive. The footer typically contains buttons, for which the mdcButton directive should be used. Cancel and accept buttons should also be marked with an mdcDialogCancel or mdcDialogAccept directive.

Directive: MdcDialogAcceptDirective

Selector: [mdcDialogAccept]

Directive to mark the accept button of a mdcDialog. This directive should be used in combination with the mdcButton directive. Accept button presses trigger the accept event on the dialog.

When the dialog is marked with the mdcFocusTrap directive, the focus trap will focus this button when activated. If you want to focus another element in the dialog instead, add the mdcFocusInitial directive to that element.

Directive: MdcDialogCancelDirective

Selector: [mdcDialogCancel]

Directive to mark the cancel button of a mdcDialog. This directive should be used in combination with the mdcButton directive. Cancel button presses trigger the cancel event on the dialog.

Directive: MdcDialogBackdropDirective

Selector: [mdcDialogBackdrop]

Directive for the backdrop of a dialog. The backdrop provides the styles for overlaying the page content when the dialog is opened. This guides user attention to the dialog.

Directive: MdcDialogSurfaceDirective

Selector: [mdcDialogSurface]

Directive for the surface of a dialog. The surface contains the actual comtent of a dialog, wrapped in elements with the mdcDialogHeader, mdcDialogBody, and mdcDialogFooter directives.

Directive: MdcDialogDirective

Selector: [mdcDialog]
Exported as: mdcDialog

Directive for creating a modal dialog with Material Design styling. The dialog should have two child elements: a surface (marked with the mdcDialogSurface directive), and a backdrop (marked with the mdcDialogBackdrop directive).

For an accessible user experience, the surface behind the dialog should not be accessible. This can be achieved by adding the mdcFocusTrap directive to the dialog element as well.

PropertyDescription
@Output()
accept
EventEmitter<void>

Event emitted when the user accepts the dialog, e.g. by clicking the accept (mdcDialogAccept) button.

@Output()
cancel
EventEmitter<void>

Event emitted when the user cancels the dialog, e.g. by clicking the cancel (mdcDialogCancel) button, or by pressing the Escape key (for dialogs with a focus-trap that is configured to close on Escape)

Methods

open()

Call this method to open the dialog.