The solution I found to set in global css file:
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 10000;
}
breaks other dialog windows (e.g. the MatDatepicker used inside form in MatDialog displays behind it). Setting it locally seems to have no effect, changing view encapsulation according to this post: Displaying a mat-select inside a modal dialog still breaks other dialog windows (the same as global set style). Can I achieve it any other way?
Edited:
Example stackblitz, where select options don't even display: https://stackblitz.com/edit/angular-jkxsig-en8bze?file=app/
Ok, seems like I found reason of problem and the solution. So the reason of the problem is the fact that bootstrap modal window (ngb-modal-window) appears under background (ngb-modal-backdrop), as described here:
Bootstrap modal appearing under background
Setting modal window z-index has no effect, because backdrop is always higher in stacking context, and bootstrap framework always overrides its z-index to 1050 after component creation. There are two solutions to the problem, which I found here:
Bootstrap modal appearing under background
1.) Disable backdrop using NgbModalOptions (setting backdrop property to false) and adding class for modal window (setting windowClass property). Then set very low value for z-index for our window class, like this, in global style.css file:
ngb-modal-window.test {
z-index: 1;
}
The drawback is, we don't have backdrop for our bootstrap modal now.
2.) Adding modal window directly under body container in html hierarchy or just append it to it, like explained here:
https://github.com/twbs/bootstrap/issues/23916
I have not tested it, but it should work, here you can find info how to append element to html body:
https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6