Ответ 1

Обновленный ответ (по состоянию на 20 декабря 2018 года)

Я обнаружил, что атрибут align используется для добавления CSS-атрибутов flexbox к действиям диалога в файле SCSS компонента диалога:

(Выдержка из dialog.scss)

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

Вот строки исходного кода: Линии SCSS

Оригинальный ответ

Вы можете использовать HTML-атрибут [align]:

<div mat-dialog-content>
  <p>What your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Demo

Ответ 2

Поскольку атрибут align не поддерживается в HTML5, вы должны использовать этот CSS вместо этого:

.mat-dialog-actions {
    justify-content: flex-end;
}

Это то, что делается внутри Angular Material, когда вы помещаете align="end", вы можете проверить элемент, чтобы проверить это.

Ответ 3

Удалить

{display: flex} 

стиль для класса mat-dialog-actions

Ответ 4

Используйте встроенную панель инструментов, которая является частью материала.

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Edit Task</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
    </h4>
    <div mat-dialog-content>
    Modal Content here
    </div>

Пользовательский CSS для заголовка

.task-header {
    background-color: transparent;
    padding: 0 5px;
    height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}