Dialog

A dialog is a floating window that can be used to display information or prompt the user for input.

Import

Import the Dialog primitives from ng-primitives/dialog.

import {
  NgpDialog,
  NgpDialogTitle,
  NgpDialogDescription,
  NgpDialogTrigger,
  NgpDialogOverlay,
} from 'ng-primitives/dialog';

Usage

Assemble the dialog directives in your template.

<button [ngpDialogTrigger]="dialog" ngpButton>Launch Dialog</button>

<ng-template #dialog let-close="close">
  <div ngpDialogOverlay>
    <div ngpDialog>
      <h1 ngpDialogTitle>Publish this article?</h1>
      <p ngpDialogDescription>
        Are you sure you want to publish this article? This action is irreversible.
      </p>
      <div class="dialog-footer">
        <button (click)="close()" ngpButton>Cancel</button>
        <button (click)="close()" ngpButton>Confirm</button>
      </div>
    </div>
  </div>
</ng-template>

Reusable Component

Create reusable components that uses the NgpDialog and NgpDialogTrigger directives.

Schematics

Generate a reusable dialog component using the Angular CLI.

ng g ng-primitives:primitive dialog

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/dialog package:

NgpDialog

Attribute	Description
data-exit	Applied when the dialog is closing.

NgpDialogTitle

NgpDialogDescription

NgpDialogTrigger

Attribute	Description
data-hover	Applied when the trigger is hovered.
data-focus-visible	Applied when the trigger is focused.
data-press	Applied when the trigger is pressed.
data-disabled	Applied when the trigger is disabled.

NgpDialogOverlay

Attribute	Description
data-exit	Applied when the dialog is closing.

NgpDialogManager

The NgpDialogManager can be used as an alternative to the NgpDialogTrigger directive for programmatically opening dialogs.

The manager provides methods to open, close, and query dialogs, and accepts a component or template reference to display.

Opens a dialog with the specified component or template reference. Closes all open dialogs. Finds an open dialog by its ID. The list of currently open dialogs. Stream that emits when a dialog has been opened. Stream that emits when all open dialogs have finished closing. Emits on subscribe if there are no open dialogs.

NgpDialogRef

Reference returned by NgpDialogManager.open(). Provides methods to interact with the opened dialog.

Closes the dialog, optionally returning a result value. Observable that emits the dialog result when the dialog is closed. The data passed to the dialog via `NgpDialogConfig.data`. The unique ID for the dialog. Whether the user is allowed to close the dialog. Observable that emits keyboard events dispatched within the dialog. Observable that emits pointer events dispatched outside of the dialog. Updates the position of the dialog. Currently a no-op as dialogs are CSS-centered.

Examples

Dialog with external data

Data can be passed to the dialog using the NgpDialogManager.

Drawer

A drawer is a type of dialog that slides in from the side of the screen.

Accessibility

Adheres to the WAI-ARIA design pattern.

Keyboard Interactions

• Esc: Close the dialog.
• Tab: Navigate through focusable elements within the dialog.
• Shift + Tab: Navigate backwards through focusable elements within the dialog.