Dialog
A modal dialog on the Angular CDK overlay.
import { inject, viewChild, TemplateRef } from '@angular/core';
import { Dialog, BuiDialogContent, BuiDialogTitle } from 'ng-blatui';
private dialog = inject(Dialog);
tpl = viewChild.required<TemplateRef<unknown>>('tpl');
open() { this.dialog.open(this.tpl(), { ariaModal: true }); }
<button buiButton (click)="open()">Open dialog</button>
<ng-template #tpl>
<div buiDialogContent>
<h2 buiDialogTitle>Title</h2>
<p>Body…</p>
</div>
</ng-template>Form dialog
<ng-template #tpl>
<div buiDialogContent class="sm:max-w-md">
<div buiDialogHeader><h2 buiDialogTitle>Edit profile</h2></div>
<div class="grid gap-4 py-2"><!-- form fields --></div>
<div buiDialogFooter><button buiButton>Save changes</button></div>
</div>
</ng-template>Confirmation
<!-- a confirm dialog: title + description + cancel/destructive -->
<div buiDialogContent>
<div buiDialogHeader><h2 buiDialogTitle>Are you sure?</h2></div>
<div buiDialogFooter>
<button buiButton variant="outline">Cancel</button>
<button buiButton variant="destructive">Delete</button>
</div>
</div>Scrollable
<!-- long body: cap height + overflow-y-auto -->
<div class="max-h-[50vh] overflow-y-auto py-2">…long content…</div>Fullscreen
<!-- pass width/height to open(); make the content fill -->
this.dialog.open(tpl, { ariaModal: true, width: '100vw', height: '100vh', maxWidth: '100vw' });
// <div buiDialogContent class="h-full !max-w-none !rounded-none flex flex-col">…</div>Positioned
<!-- anchor it with a global position strategy -->
import { Overlay } from '@angular/cdk/overlay';
overlay = inject(Overlay);
this.dialog.open(tpl, { ariaModal: true,
positionStrategy: this.overlay.position().global().top('1.5rem').centerHorizontally() });Dispatchable
<!-- open from anywhere via the Dialog service -->
this.dialog.open(tpl, { ariaModal: true });