How to align button right inside Dialog angular material?
You can use the align
HTML attribute:
<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>
Demo
Note: The reason why setting an align="end"
attribute works on the dialog's actions container is because the align
attribute is used to add flexbox properties to the dialog actions in the dialog component's theming SCSS file:
(Extract of dialog.scss
)
.mat-dialog-actions {
// ...
&[align='end'] {
justify-content: flex-end;
}
&[align='center'] {
justify-content: center;
}
}
Here's the source code.
Use the build in toolbar that is part of material.
<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>
Custom CSS for header
.task-header {
background-color: transparent;
padding: 0 5px;
height: 20px;
}
.fx-spacer {
flex: 1 1 auto;
}
Since the align
attribute is not supported in HTML5, you should use this CSS instead:
.mat-dialog-actions {
justify-content: flex-end;
}
This is what is done internally by Angular Material when you put align="end"
, you can inspect the element to check that.