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>

API Reference

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

NgpDialog

The dialog container.

• Selector: [ngpDialog]
• Exported As: ngpDialog

The role of the dialog. Use `'dialog'` for dialogs that require user interaction and `'alertdialog'` for dialogs that require immediate user attention. Whether the dialog is modal. A modal dialog prevents the user from interacting with the rest of the page until the dialog is closed.

NgpDialogTitle

The dialog title.

• Selector: [ngpDialogTitle]
• Exported As: ngpDialogTitle

NgpDialogDescription

The dialog description.

• Selector: [ngpDialogDescription]
• Exported As: ngpDialogDescription

NgpDialogTrigger

Add to a button or link to open the dialog.

• Selector: [ngpDialogTrigger]
• Exported As: ngpDialogTrigger

The dialog template to open when the trigger is activated.

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

The dialog overlay.

• Selector: [ngpDialogOverlay]
• Exported As: ngpDialogOverlay

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.