Alert dialog

import { Dialog, DialogRef } from 'ng-blatui';

dialogRef: DialogRef<unknown> | null = null;
open(tpl) { this.dialogRef = this.dialog.open(tpl, { ariaModal: true }); }
close() { this.dialogRef?.close(); }

<button buiButton variant="destructive" (click)="open(tpl)">Delete…</button>
<ng-template #tpl>
  <div buiAlertDialogContent>
    <div buiAlertDialogHeader>
      <h2 buiAlertDialogTitle>Delete project?</h2>
      <p buiAlertDialogDescription>This cannot be undone.</p>
    </div>
    <div buiAlertDialogFooter>
      <button buiAlertDialogCancel (click)="close()">Cancel</button>
      <button buiAlertDialogAction (click)="close()">Delete</button>
    </div>
  </div>
</ng-template>

<ng-template #tpl>
  <div buiAlertDialogContent>
    <div buiAlertDialogHeader>
      <h2 buiAlertDialogTitle>Leave this page?</h2>
      <p buiAlertDialogDescription>You have unsaved changes.</p>
    </div>
    <div buiAlertDialogFooter>
      <button buiAlertDialogCancel>Stay</button>
      <button buiAlertDialogAction>Leave</button>
    </div>
  </div>
</ng-template>