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.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: 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 a method to open or close all dialogs and accepts a component or template reference to display.

Opens a dialog with the specified component or template reference. Closes all open dialogs.

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.