TailNG — Angular UI with Tailwind

Overview

tng-dialog is a centered modal for confirm/cancel flows. Open state is controlled via [open]; it closes on escape and backdrop click by default. Uses focus trap for accessibility. Slots: [tngDialogHeader], default (body), [tngDialogFooter]. Use (closed) with TngDialogCloseReason to handle confirm, cancel, escape, outside-click, or programmatic close.

Quick example

Basic

HTML

CSS


<button (click)="open.set(true)">Open dialog</button>
<tng-dialog [open]="open()" (closed)="onClosed($event)" ariaLabel="Confirm">
  <div tngDialogHeader class="font-semibold">Confirm</div>
  <p class="text-sm">Are you sure?</p>
  <div tngDialogFooter class="flex justify-end gap-2">
    <button (click)="onClosed('cancel')">Cancel</button>
    <button (click)="onClosed('confirm')">OK</button>
  </div>
</tng-dialog>

import { signal } from '@angular/core';
import { TngDialog, TngDialogCloseReason } from '@tailng-ui/ui/overlay';

// In component:
open = signal(false);
onClosed(reason: TngDialogCloseReason) {
  open.set(false);
  // reason: 'confirm' | 'cancel' | 'escape' | 'outside-click' | 'programmatic'
}

Features

Controlled open

Bind [open] and handle (closed) to update state; close reasons: confirm, cancel, escape, outside-click, programmatic.

Focus trap & a11y

Focus trap, restore focus, optional tngDialogInitialFocus for initial focus target. ariaLabel for the dialog.

Slot styling

backdrop, panel, headerWrap, bodyWrap, footerWrap for theming.