angular 8 material dialog close button with X top right - html

Question

I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning.
component.ts
this.d.open(loginComponent, {
width: '300px',
height: '',
panelClass: 'dialogC',
});
component.html
<mat-dialog-content>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
<h2 mat-dialog-title>Login</h2>
style.scss
.dialogC {
position: relative !important;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
The X is just aligned to the left instead of top right. Suggestions?
Update, this is the problem I get after adding flex:

Answer 1

<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>
CSS: (Please give it in global (styles.css) or give ViewEncapsulation.NONE or else these styles wont affect.)
.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;
}
Note that in the CSS We now have a new class out of thin air .my-dialog
So, please mention that as panelClass in dialogRef like below,
this.dialog.open(DialogComponent, {
width: '250px',
panelClass: 'my-dialog',
..
..
This yields me the following result,

Answer 2

The easy way now is:
<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>
And the dialog-title css is
.dialog-title {
display: flex;
justify-content: space-between;
align-items: center;
}
That's working on Angular 8.0.0

Answer 3

Using mat-icon-button it is necessary to add only the style below to the button.
.close-button{
float: right;
top:-24px;
right:-24px;
}
Functional example:
stackblitz

Answer 4

You can have the X at the title and display: flex ? Like this,
<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 to the rescue,
.flex-container { display: flex;}
SideNote: You can still use fxLayout instead of .flex-container

Answer 5

In your component HTML file add the following markup at the top of all elements.
<div mat-dialog-title style="float: right; font-weight: 700; cursor: pointer;" (click)="close()">X</div>
In your component TS file add the close function as follows.
close(): void {
this.dialogRef.close();
}
Don't forget to include the dialogRef inside the constructor as an argument
constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

Answer 6

What I prefer is doing something like this -
.html file
<button class="close" mat-button mat-dialog-title (click)="closeDialog()">X</button>
By giving mat-dialog-title to the button I make sure it is in the top layer and then I give custom class to it, something like
.css file
.close.mat-button {
position: inherit;
top: 0;
right: 0;
padding: 2px;
line-height: 3px;
min-width: auto;
}
The button discussed above and my modal-content is in a parent div, which I display as flex and use as flex-direction: column
.dialog{
display: flex;
flex-direction: column;
}
.ts file
closeDialog() {
this.dialogRef.close();
}```

Answer 7

You can acheive this by applying some css styles to mat-icon, you can achieve this.
Mat-dialog looks as below.
<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>
Add the following css rules
// 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
}
Your mat-dialog consuming componnet should look as below
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');
});
}
Adding custom class icon-outside is important.
This will change your code as expected.
If you are seeking to change the color of the icon, Add these two classes to mat-icon material-icons & color_white
So your button will look as below:
<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>

Answer 8

I just ran into the same problem. I've come up with an easier solution using floats. This also aligns the close X with the title, which I find more visually pleasing.
HTML file:
<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>

Answer 9

On our project I did an implementation using flex and css.
.html file
<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>
.ts file
openMinimumsModal( ) {
const dialogRef = this.matDialog.open(OrderMinimumsComponent, {
width: 'auto',
panelClass: 'dialog-no-padding',
data: { ... },
});
dialogRef.afterClosed().subscribe(() => {});
}
close(): void {
this.dialogRef.close();
}
.css file
.dialog-no-padding .mat-dialog-container {
padding: 0;
}
.pd-2 {
padding: 0 20px 20px 20px !important;
}

Answer 10

Possible duplicate: 49420069
Close functionality and button alignment without 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;
}
}