Dialog

MatDialog provides a configurable dialog overlay for displaying content in a modal window.

Basic Dialog

Open a dialog with a custom component using MatDialog service.

Code
<button mat-raised-button color="primary" (click)="openDialog()">Open Dialog</button>

Dialog with Template

Open a dialog using an ng-template reference instead of a separate component.

Code
<ng-template #dialogTemplate>
  <h2 mat-dialog-title>Template Dialog</h2>
  <mat-dialog-content>
    <p>Dialog content</p>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button mat-dialog-close>Close</button>
  </mat-dialog-actions>
</ng-template>