Primitives

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.

import { Component } from '@angular/core';
import { NgpButton } from 'ng-primitives/button';
import { NgpDialogTrigger } from 'ng-primitives/dialog';
import { Dialog } from './dialog';

@Component({
  selector: 'app-root',
  imports: [Dialog, NgpDialogTrigger, NgpButton],
  template: `
    <button [ngpDialogTrigger]="dialog" ngpButton>Open Dialog</button>

    <ng-template #dialog let-close="close">
      <app-dialog header="Dialog header">
        <p>This is a dialog. It can be used to display information or to ask for confirmation.</p>
        <p>
          You can use the dialog to display any content you want. It can be used to display forms,
          images, or any other content.
        </p>
        <p>
          You can also use the dialog to ask for confirmation. For example, you can use it to ask
          the user if they want to delete an item.
        </p>

        <button (click)="close()" ngpButton>Close</button>
        <button (click)="close()" ngpButton>Delete</button>
      </app-dialog>
    </ng-template>
  `,
  styles: `
    button {
      padding-left: 1rem;
      padding-right: 1rem;
      border-radius: 0.5rem;
      color: var(--ngp-text-primary);
      border: none;
      outline: none;
      height: 2.5rem;
      font-weight: 500;
      background-color: var(--ngp-background);
      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: var(--ngp-button-shadow);
    }

    button[data-hover] {
      background-color: var(--ngp-background-hover);
    }

    button[data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 2px;
    }

    button[data-press] {
      background-color: var(--ngp-background-active);
    }
  `,
})
export default class App {}

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

  • Selector: [ngpDialog]
  • Exported As: ngpDialog
ngpDialogRole
NgpDialogRole | undefined

The dialog role.

ngpDialogModal
boolean

Whether the dialog is a modal.

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

NgpDialogTitle

  • Selector: [ngpDialogTitle]
  • Exported As: ngpDialogTitle

NgpDialogDescription

  • Selector: [ngpDialogDescription]
  • Exported As: ngpDialogDescription

NgpDialogTrigger

  • Selector: [ngpDialogTrigger]
  • Exported As: ngpDialogTrigger
ngpDialogTrigger
TemplateRef<NgpDialogContext>
required

The template to launch.

ngpDialogTriggerCloseOnEscape
boolean | undefined
default: "`true`"

Whether the dialog should close on escape.

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

  • Selector: [ngpDialogOverlay]
  • Exported As: ngpDialogOverlay
ngpDialogOverlayCloseOnClick
boolean
default: "`true`"

Whether the dialog should close on backdrop click.

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

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.

Copyright © 2025 Angular Primitives