Puede tener la X en el título y display: flex ? Me gusta esto,

 <div mat-dialog-title class="flex-container"> <h1>Login</h1> <button mat-button class="close-icon" [mat-dialog-close]="true"> <mat-icon>close</mat-icon> </button> </div> <div mat-dialog-content> ... ... </div>

FlexBox al rescate,

 .flex-container { display: flex;}

Nota al margen: aún puede usar fxLayout en lugar de .flex-container

<button class="close" mat-button (click)="onNoClick()">X</button> <h1 mat-dialog-title>Login</h1> <div mat-dialog-content> ... ... </div>

CSS: (Indíquelo en global ( styles.css ) o proporcione ViewEncapsulation.NONE o, de lo contrario, estos estilos no afectarán).

 .cdk-overlay-pane.my-dialog { position: relative!important; } .close.mat-button { position: absolute; top: 0; right: 0; padding: 5px; line-height: 14px; min-width: auto; }

Tenga en cuenta que en el CSS ahora tenemos una nueva clase de la nada .my-dialog

Entonces, mencione eso como panelClass en dialogRef como a continuación,

 this.dialog.open(DialogComponent, { width: '250px', panelClass: 'my-dialog', .. ..

Esto me da el siguiente resultado,

Usando mat-icon-button es necesario agregar solo el estilo a continuación al botón.

 .close-button{ float: right; top:-24px; right:-24px; }

Ejemplo funcional:

apilar

En el archivo HTML de su componente, agregue el siguiente marcado en la parte superior de todos los elementos.

 <div mat-dialog-title style="float: right; font-weight: 700; cursor: pointer;" (click)="close()">X</div>

En su archivo TS de componente, agregue la función de cierre de la siguiente manera.

 close(): void { this.dialogRef.close(); }

No olvides incluir el dialogRef dentro del constructor como argumento.

 constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

Posible duplicado: 49420069

Cerrar funcionalidad y alineación de botones sin 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; } }

Lo que prefiero es hacer algo como esto:

archivo .html

 <button class="close" mat-button mat-dialog-title (click)="closeDialog()">X</button>

Al darle mat-dialog-title al botón, me aseguro de que esté en la capa superior y luego le doy una clase personalizada, algo así como

archivo .css

 .close.mat-button { position: inherit; top: 0; right: 0; padding: 2px; line-height: 3px; min-width: auto; }

El botón discutido anteriormente y mi contenido modal está en un div principal, que muestro como flex y uso como flex-direction: columna

 .dialog{ display: flex; flex-direction: column; }

archivo .ts

 closeDialog() { this.dialogRef.close(); }```

Puede lograr esto aplicando algunos estilos css a mat-icon, puede lograr esto.

Mat-diálogo se ve a continuación.

 <button mat-icon-button class="close-button" [mat-dialog-close]="true"> <mat-icon class="close-icon" color="warn">close</mat-icon> </button> <h1 mat-dialog-title>Hi {{data.name}}</h1> <div mat-dialog-content> <p>Hello World!</p> </div>

Agregue las siguientes reglas css

 // if you want to change the color of the icon .material-icons.color_white {color: #ffffff;} .close-button{ float: right; top:-24px; right:-24px; } //if you want some css animation .close-icon { transition: 1s ease-in-out; } .close-icon:hover { transform: rotate(180deg); } //To place the x mark outside of the container ::ng-deep .icon-outside .close-button{ float: right; top:-52px; right:-52px; } ::ng-deep .icon-outside .mat-dialog-container { overflow: unset }

Su componente de consumo de mat-dialog debería verse como se muestra a continuación

 constructor(public dialog: MatDialog) {} openDialog(): void { const dialogRef = this.dialog.open(DialogComponent, { width: '250px', panelClass:'icon-outside', data: {name: 'your name'} }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); }); }

Es importante agregar un icon-outside .

Esto cambiará su código como se esperaba. Si está buscando cambiar el color del ícono, agregue estas dos clases a mat-icon material-icons & color_white

Entonces su botón se verá como se muestra a continuación:

 <button mat-icon-button class="close-button icon-outside" [mat-dialog-close]="true"> <mat-icon class="close-icon material-icons color_white">close</mat-icon> </button>

En nuestro proyecto hice una implementación usando flex y css.

archivo .html

 <div fxLayout="column"> <div fxLayoutAlign="end"> <button mat-icon-button color="primary" (click)="close()"><mat-icon>close</mat-icon></button> </div> <mat-card class="pd-2"> ... </mat-card> </div>

archivo .ts

 openMinimumsModal( ) { const dialogRef = this.matDialog.open(OrderMinimumsComponent, { width: 'auto', panelClass: 'dialog-no-padding', data: { ... }, }); dialogRef.afterClosed().subscribe(() => {}); } close(): void { this.dialogRef.close(); }

archivo .css

 .dialog-no-padding .mat-dialog-container { padding: 0; } .pd-2 { padding: 0 20px 20px 20px !important; }

La manera fácil ahora es:

 <div mat-dialog-title class="dialog-title"> <h2>Title</h2> <button mat-icon-button aria-label="close dialog" mat-dialog-close> <mat-icon>close</mat-icon> </button> </div>

Y el css del título del diálogo es

 .dialog-title { display: flex; justify-content: space-between; align-items: center; }

Eso está funcionando en Angular 8.0.0

Acabo de encontrarme con el mismo problema. Se me ocurrió una solución más fácil usando flotadores. Esto también alinea la X cercana con el título, lo que me parece más agradable a la vista.

archivo HTML:

 <div> <h1 mat-dialog-title style="float: left">Dialog Title</h1> <span style="float: right" [mat-dialog-close]>X</span> </div> <div mat-dialog-content style="clear: both"> ... </div>