Angular snack bar increasing z-index not working?

Question

Scenario :

• I have a Bootstrap Modal opened.
• While user interacting with the modal , if any error occurs, I would like to show that error in Angular Snack bar.
• Snack bar is shown behind Bootstrap modal. And I would like Angular snack bar to be shown in front on screen and Bootstrap modal behind.

It is possible by changing any css-z-index things ?

Answer 1

all of them is working for me.

::ng-deep .cdk-overlay-container {
  z-index: 10000 !important;
}

or

.cdk-overlay-container {
    z-index: 99999999999999; 
}

or

:host /deep/ .cdk-overlay-pane{
   z-index: 1000;
 }

Answer 2

Again, RTFM !

panelClass: string | string[]         Extra CSS classes to be added to the snack bar container.

Provide this as the config to your snackbar (or override the provider in your own module to apply it to every snackbar), and set the z-index in your given class.