I want to add Cancel Icon Outside for Mat-Dialog when its opened.
For reference: https://stackblitz.com/angular/dgjvllndexp?file=app%2Fdialog-content-example.html
ThankYou in advance.
Asked
Active
Viewed 1,710 times
2
-
Have u check this? https://stackoverflow.com/questions/58151512/angular-8-material-dialog-close-button-with-x-top-right – azer-p Jul 28 '20 at 15:12
-
Yeah, I have Checked. But i want to add cancel icon outside of Mat-dialog. – prasannakumar chebrolu Jul 28 '20 at 15:14
-
what do mean to add cancel icon outside dialog? – azer-p Jul 28 '20 at 15:17
-
Here https://stackoverflow.com/questions/58151512/angular-8-material-dialog-close-button-with-x-top-right They add cancel icon on Top right inside of Mat-dialog . I want that cancel icon Top right Outside of Mat-dialog. – prasannakumar chebrolu Jul 28 '20 at 15:21
-
you have `const dialogRef = this.dialog.open(DialogContentExampleDialog, {` in your stackblitz. you can do `this.dialogRef.close()` anywhere you need – D Pro Jul 28 '20 at 15:21
-
Yes, By Clicking cancel icon I want to close the dialog – prasannakumar chebrolu Jul 28 '20 at 15:23
1 Answers
3
First your dialog container should be positioned to relative and x-button to absolution position. Then on x-button, set to top:0;right:0; and translate(100%,-100%).
It should position it as you want. See my stackblitz https://stackblitz.com/edit/angular-e8aunf
azer-p
- 304
- 1
- 12