Blox Material v1.0.0

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

API

Directive: MdcDialogTitleDirective

Selector: [mdcDialogTitle]

Directive for the title of an mdcDialog. A title is optional. If used, it should be the first child of an mdcDialogSurface. Please note that there should be no whitespace separating the start/end tag and the title itself. (The easiest way to achieve this is to not set the preserveWhitespaces option to true the angularCompilerOptions).

Directive: MdcDialogContentDirective

Selector: [mdcDialogContent]

Directive for the content part of an mdcDialog. This should be added as a child element of an mdcDialogSurface.

Directive: MdcDialogActionsDirective

Selector: [mdcDialogActions]

Directive for the actions (footer) of an mdcDialog. This is an (optional) last child of the mdcDialogSurface directive. This directive should contain buttons, for that should use the mdcButton directive.

Action buttons should typically close the dialog, and should therefore also set a value for the mdcDialogTrigger directive.

Directive: MdcDialogTriggerDirective

Selector: [mdcDialogTrigger]

Any element within a dialog may include this directive (and assigne a non empty value to it) to indicate that interacting with it should close the dialog with the specified action.

This action is then reflected via the action field in the closing and closed events of the dialog. A value of close will also trigger the cancel event of the dialog, and a value of accept will trigger the accept event.

Any action buttons within the dialog that equate to a dismissal with no further action should use set mdcDialogTrigger="close". This will make it easy to handle all such interactions consistently (via either the cancel, closing, or closed events), while separately handling other actions.

Property Description
@Input()
mdcDialogTrigger
string | null

Set the action value that should be send to closing and closed events when a user interacts with this element. (When set to an empty string the button/element will not be wired to close the dialog).

Directive: MdcDialogDefaultDirective

Selector: [mdcDialogDefault]

This directive can be used to mark one of the dialogs action buttons as the default action. This action will then be triggered by pressing the enter key while the dialog has focus. The default action also will receive focus when the dialog is opened. Unless another element within the dialog has the mdcFocusInitial directive.

Directive: MdcDialogSurfaceDirective

Selector: [mdcDialogSurface]

Directive for the surface of a dialog. The surface contains the actual content of a dialog, wrapped in elements with the mdcDialogHeader, mdcDialogContent, and mdcDialogActions directives.

Accessibility

  • The role attribute will be set to alertdialog by default
  • The aria-modal attribute will be set to true by default
  • If there is an mdcDialogTitle, the aria-labelledBy attribute will be set to the id of that element (and a unique id will be assigned to it, if none was provided)
  • If there is an mdcDialogContent, the aria-describedby attribute will be set to the id of that element (and a unique id will be assigned to it, if none was provided)

Directive: MdcDialogContainerDirective

Selector: [mdcDialogContainer]

This directive should be the first child of an mdcDialog, and contains the mdcDialogSurface.

Directive: MdcDialogScrimDirective

Selector: [mdcDialogScrim]

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

When the dialog is opened, it will activate a focus trap on the elements within the dialog, so that the surface behind the dialog is not accessible. See mdcFocusTrap for more information.

Property Description
@Output()
accept
EventEmitter<void>

Event emitted when the user accepts the dialog, e.g. by pressing enter or clicking the button with mdcDialogTrigger="accept".
@Output()
cancel
EventEmitter<void>

Event emitted when the user cancels the dialog, e.g. by clicking outside the dialog, pressing the escape key, or clicking an element with mdcDialogTrigger="close".
@Output()
opening
EventEmitter<void>

Event emitted when the dialog starts opening.
@Output()
opened
EventEmitter<void>

Event emitted when the dialog is opened.
@Output()
closing
EventEmitter<{ action: string; }>

Event emitted when the dialog starts closing. The 'action' field contains the reason for closing, see mdcDialogTrigger for more information.
@Output()
closed
EventEmitter<{ action: string; }>

Event emitted when the dialog is closed. The 'action' field contains the reason for closing, see mdcDialogTrigger for more information.

Methods

open()

Call this method to open the dialog.
close(action)

Call this method to close the dialog with the specified action, e.g. accept to indicate an acceptance action (and trigger the accept event), or close to indicate dismissal (and trigger the cancel event).
Parameters
action
string = 'close'
layout()

Recalculates layout and automatically adds/removes modifier classes (for instance to detect if the dialog content should be scrollable)