Alert dialog

A confirm modal (role=alertdialog) on the CDK.

import { Dialog } from 'ng-blatui';

open(tpl) { this.dialog.open(tpl, { ariaModal: true }); }

<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>Cancel</button>
      <button buiAlertDialogAction>Delete</button>
    </div>
  </div>
</ng-template>

Confirm

<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>