Dialog

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>

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

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

<!-- long body: cap height + overflow-y-auto -->
<div class="max-h-[50vh] overflow-y-auto py-2">…long content…</div>

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

<!-- 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() });

<!-- open from anywhere via the Dialog service -->
this.dialog.open(tpl, { ariaModal: true });