Quiero alinear el botón La esquina derecha del cuadro de diálogo a continuación es mi html
<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> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> <a href="https://stackblitz.com/edit/angular-ksmixt?file=app/dialog-overview-example-dialog.html">demo</a>Puede utilizar el atributo HTML de 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> Nota: La razón por la que la configuración de un atributo align="end" funciona en el contenedor de acciones del cuadro de diálogo es que el atributo align se usa para agregar propiedades de flexbox a las acciones del cuadro de diálogo en el archivo SCSS de tematización del componente del cuadro de diálogo:
(Extracto de dialog.scss )
.mat-dialog-actions { // ... &[align='end'] { justify-content: flex-end; } &[align='center'] { justify-content: center; } }Aquí está el código fuente .
Dado que el atributo de align no es compatible con HTML5 , debe usar este CSS en su lugar:
.mat-dialog-actions { justify-content: flex-end; } Esto es lo que hace internamente Angular Material cuando coloca align="end" , puede inspeccionar el elemento para verificar eso.
Utilice la barra de herramientas integrada que forma parte del 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>CSS personalizado para encabezado
.task-header { background-color: transparent; padding: 0 5px; height: 20px; } .fx-spacer { flex: 1 1 auto; }