Dialog

The ownable Dialog install gives your app a local modal wrapper, nearby behavior helpers, and an editable shell for product-specific confirmation, review, and blocking workflows.

Why own Dialog locally

Modal shells almost always drift into product-specific territory once teams add review content, destructive-action framing, animation, or branded action layouts. Local ownership keeps those decisions close to the feature that depends on them.

Adjust panel spacing, header treatment, and action rows without waiting on a package release.
Keep modal copy, analytics hooks, and action semantics versioned beside the owning workflow.
Extend the generated wrapper if your product later needs richer footer or layout variants.

What the install includes

The registry-backed dialog install writes the local wrapper component, template, stylesheet, export barrel, and the primitive helper file that handles IDs, focus resolution, and scroll locking. Your app owns the generated source after install.

Ownable Install

Install Dialog from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add dialog

npx tailng add dialog

Generated files

The command scaffolds local files under src/app/tailng-ui/dialog.

src/app/tailng-ui/dialog/tng-dialog-primitive.ts
src/app/tailng-ui/dialog/tng-dialog.ts
src/app/tailng-ui/dialog/tng-dialog.html
src/app/tailng-ui/dialog/tng-dialog.css
src/app/tailng-ui/dialog/index.ts

Import in your feature module/component

import { TngDialog } from './tailng-ui/dialog';

Usage

<button type="button" (click)="reviewDialogOpen = true">Open review</button>

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