Как выровнять кнопку прямо внутри материала Dialog angular?

Удалять

{display: flex} 

стили для действий класса mat-dialog-actions

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

<div mat-dialog-content>
  <p>What's 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>

Демо

Примечание. Причина, по которой установка атрибута align = "end" работает в контейнере действий диалогового окна, заключается в том, что атрибут align используется для добавления свойств flexbox к действиям диалогового окна в SCSS-файле тематики компонента диалога:

(Экстракт dialog.scss)

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

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

Вот исходный код.

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

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

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

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

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

Думаю, я немного опоздал, но все равно. вы можете использовать атрибут стиля float:

  <button mat-button [mat-dialog-close] = "data.animal" cdkFocusInitial style = "float: left;">Ok</button>

Я использовал встроенный стиль для упрощения демонстрации. но я не рекомендую встроенные стили для ваших проектов. вместо этого используйте отдельные таблицы стилей

Закройте функциональность и выравнивание кнопок без TypeScript.

HTML:

<button class = "button-close" mat-button [mat-dialog-close] = "true">X</button>

CSS:

.button-close {
    justify-self: right;
    font-size: 20px;
    border: none;
    height: 30px;
    background-color: #FFFFFF;
    outline: none;
    color: #c04747;
    
    &:hover {
        cursor: pointer;
    }
}