How can i change the Z-Index of mat-dialog in Angular-CodePudding

My app uses multiple mat-dialogs and sometimes it can happen that 2 are displayed at same time which causes a problem as the second one is never displayed correct and since its modal renders the app useless. After some more research it seems i can adjust the z-index for the mat-dialog via

.cdk-overlay-container {
z-index: 500 !important;

}

But that wont solve my problem as it will change the z-index for all to 500. My question is how can i change the Z-index only for certain mat-dialogs. For example all my basic dialogs can be one z-index as they will never show at same time and then i have dialogs which will alert or warn users which have to go above these basic ones. What is the best way to make it somewhat user configurable ?

CodePudding user response：

When opening dialog you can provide MatDialogConfig into open method. One property of config is panelClass. So in your global styles you can have a class that will change the z-index, only if the class is applied to the modal via config.

styles.css

.warning-dialog {
    z-index: 500 !important;
}

and then when opening the dialog you can pass class name in the config:

this.dialog.open(
    YourComponent,
    {
        panelClass: 'warning-dialog'
    }
);

Also consider removing !important from your styles, it usually creates problems in the future with maintainability of styles.