Content Comparison

References

• Material Documentation

Example

Image Removed

Image Added

Usage

Structure

<div mat-dialog-title>
  Dialog Title
  <button [mat-dialog-close]="true" class="mat-dialog-close">
    <span class="cvtr-icons remove"></span>
  </button>
</div>
<mat-dialog-content>
  Dialog Content
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button>Save</button>
</mat-dialog-actions>

Dialog Content

• Use <mat-dialog-content> for dialog content.

Dialog Title

• Use <div mat-dialog-title> the add the title for each dialog.

Dialog Actions

• Use <mat-dialog-actions> as a container for the dialog ‘Close’ and action buttons (in most cases this will be a ‘Save’ button).

• The ‘Close’ button should be placed within <div mat-dialog-title> and should include [mat-dialog-close]="true” to allow the modal to be closed.