Dialog for Angular

import { AuiDialog } from '@absoluteui/angular/dialog';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Dialog page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { dialog: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import type { DialogAction, DialogCloseDetail } from '@absoluteui/components/dialog';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiDialog } from '@absoluteui/angular/dialog';

@Component({
  selector: 'app-delete-file',
  imports: [AuiButton, AuiDialog],
  template: `
    <button type="button" auiButton variant="danger" (click)="confirming.set(true)">Delete file</button>
    <aui-dialog title="Delete report.pdf?" role="alertdialog" [actions]="actions" [open]="confirming()" (closed)="closed($event)">
      <p>The file is removed for everyone. This cannot be undone.</p>
    </aui-dialog>`,
})
export class DeleteFileComponent {
  readonly confirming = signal(false);
  readonly actions: DialogAction[] = [
    { label: 'Cancel', value: 'cancel', variant: 'secondary', autofocus: true },
    { label: 'Delete', value: 'delete', variant: 'danger' },
  ];

  closed(detail: DialogCloseDetail): void {
    this.confirming.set(false);
    if (detail.returnValue === 'delete') {
      // delete the file
    }
  }
}

<aui-dialog>

Class AuiDialog; template reference #ref="auiDialog".

AbsoluteUI Dialog; the projected content is the body: <aui-dialog title="Delete file?" [(open)]="confirming"><p>This cannot be undone.</p></aui-dialog>. open follows user dismissals (Escape, backdrop, close button, actions).

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
title	string		Required. Accessible name, rendered as the heading.
description	string		Referenced by aria-describedby.
actions	readonly DialogAction[]		Footer buttons; clicking closes with the action value.
role	"dialog" | "alertdialog"	'dialog'	Use alertdialog for urgent confirmations.
size	DialogSize	'md'	Maximum inline size.
closeOnEscape	boolean	true	Escape requests close (cancelable).
closeOnBackdrop	boolean	false	Backdrop click requests close (cancelable).
showCloseButton	boolean	true	Render the header close button.
icons	Partial<DialogIcons>		Icon slot overrides.

Two-way bindings

Model	Type	Change output	Description
[(open)]	boolean	(openChange)	Whether the dialog is shown: [(open)]. Closing by Escape, the close button, or an action sets it to false.

Outputs

Output	Payload	Description
(opened)	null	After the dialog opened. Re-emits aui-open.
(cancelled)	DialogCloseDetail	Dismissal by Escape or backdrop, before closed. Re-emits aui-cancel.
(closed)	DialogCloseDetail	After the dialog closed. Re-emits aui-close.

Test harness

AuiDialogHarness from @absoluteui/angular/testing. An open AbsoluteUI dialog (<aui-dialog> or AuiDialogService). Dialogs render in the body layer: load it with TestbedHarnessEnvironment.documentRootLoader(fixture).