Imports

Import the wrapper when your team wants a ready-made panel, header, and close affordance.

import { TngDialogComponent } from '@tailng-ui/components';

Usage patterns

Control the open state from your feature and project any body or footer content into the wrapper.

<button type="button" (click)="open.set(true)">Open review</button>

<tng-dialog
  title="Review changes"
  description="Confirm before publishing the release."
  [open]="open()"
  (openChange)="open.set($event)"
  (closed)="onClosed($event)"
>
  <p>Wrapper dialog body content.</p>
</tng-dialog>

Keyboard baseline

• Tab/Shift+Tab cycles focus inside the dialog panel.
• Escape closes when dismissal is enabled.
• Backdrop pointer down closes when closeOnBackdrop is enabled.
• Focus returns to the trigger when wrapper focus restoration is active.