Dialog / Modal

Modal dialogs with overlay, FocusTrap, configurable sizes, and custom content templates.

Dialog Sizes

Choose from sm, md, lg, xl, or fullscreen sizes.

Selected size: md

Code
<ng-template #myDialog let-dialogRef="dialogRef">
  <p>Content here</p>
  <button mat-button (click)="dialogRef.close()">Close</button>
</ng-template>

<button mat-raised-button (click)="open(myDialog)">Open Dialog</button>

Custom Content

Pass custom content and footer templates for full control over layout.

Code
<ng-template #dialogContent let-dialogRef="dialogRef">
  <p>{{ dialogMessage }}</p>
</ng-template>
<ng-template #dialogFooter let-dialogRef="dialogRef">
  <div style="display:flex;justify-content:flex-end;align-items:center;gap:0.5rem;padding:1rem 1.5rem;border-top:1px solid var(--mat-sys-outline-variant);">
    <button mat-button (click)="dialogRef.close()">Ok</button>
  </div>
</ng-template>
<button mat-raised-button (click)="open(dialogContent, dialogFooter, dialogTitle)">
  Open Custom
</button>

Options

Disable close, go fullscreen, or add confirmation flows.

Non-dismissible
<ng-template #blockingDialog let-dialogRef="dialogRef">
  <p>Important content</p>
  <button mat-raised-button (click)="dialogRef.close()">Confirm</button>
</ng-template>

<button mat-stroked-button (click)="openBlocking(blockingDialog)">
  Non-dismissible
</button>
Fullscreen
<!-- Same template pattern as above -->
<button mat-stroked-button (click)="openWithTemplate(fullscreenDialog, 'fullscreen', 'Fullscreen')">
  Fullscreen
</button>
Confirm Dialog
<ng-template #confirmContent let-dialogRef="dialogRef">
  <p>Are you sure?</p>
</ng-template>
<ng-template #confirmFooter let-dialogRef="dialogRef">
  <div style="display:flex;justify-content:flex-end;align-items:center;gap:0.5rem;padding:1rem 1.5rem;border-top:1px solid var(--mat-sys-outline-variant);">
    <button mat-stroked-button (click)="dialogRef.dismiss()">Abort</button>
    <button mat-raised-button color="warn" (click)="dialogRef.close('confirmed')">Delete</button>
  </div>
</ng-template>

<button mat-raised-button color="warn" (click)="openDeleteConfirm(confirmContent, confirmFooter)">
  Delete Confirmation
</button>