Dialog / Modal

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

<ng-template #dialogContent let-dialogRef="dialogRef">
  <p>{{ dialogMessage }}</p>
</ng-template>
<ng-template #dialogFooter let-dialogRef="dialogRef">
  <div class="flex justify-end items-center gap-2 px-6 py-4 border-t border-[var(--mat-sys-outline-variant)]">
    <button mat-button (click)="dialogRef.close()">Ok</button>
  </div>
</ng-template>
<button mat-raised-button (click)="open(dialogContent, dialogFooter, title)">
  Open Custom
</button>

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

<!-- Same template pattern as above -->
<button mat-stroked-button (click)="openFullscreen(myDialog)">
  Fullscreen
</button>

<ng-template #confirmContent let-dialogRef="dialogRef">
  <p>Are you sure?</p>
</ng-template>
<ng-template #confirmFooter let-dialogRef="dialogRef">
  <div class="flex justify-end items-center gap-2 px-6 py-4 border-t border-[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)="openConfirm(confirmContent, confirmFooter)">
  Delete Confirmation
</button>