...
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.
Dialog Alignment
Default Behaviour
As standard, dialogs are positioned centrally on screen, no additional code or classes is required to achieve this behaviour.
Top Aligned
There are some instances where dialogs need to be differently positioned, for example when a dialog contains tabs, and each tab has different content which means that the height of the dialog changes when switching tabs.
In this case, dialogs can be aligned to the top of the screen rather than middle by adding the class of mat-dialog-top-align to the mat-dialog-content container div, e.g:
<div mat-dialog-content class="mat-dialog-top-align">
This class addition will change the position of dialogs from middle aligned:
...
To top aligned:
...