[ANGULAR] How can I display a ngb toast notification over brynutm modal

[stewart_wo]

We are using NgbToast to display notifications in our Angular application.

HTML Code

<ngb-toast
  *ngFor="let toast of toastService.toasts" [class]="toast?.classname"
  [header]="toast.header" [autohide]="true" [delay]="toast.delay || 5000"
  (hidden)="toastService.remove(toast)"
<div [innerHTML]="toast.body"></div></ngb-toast>

CSS Code

:host {
  position: fixed;
  top: 0;
  right: 0;
  margin: 0.5em;
  z-index: 1200;
}

[alex.l]

Hi, I know nothing about ngb-toast, but DOM inspection showed me that modal mask has next CSS

.b-modal-mask {
    background-color: #64646480;
    position: fixed;
    inset: 0;
    pointer-events: all;
    z-index: 11001;
}

I believe you could try to set greater z-index for your toasts or override z-index for b-modal-mask class.