NgbModal from ng-bootstrap freezing and not working in ng-bootstrap version 15 and Angular version 16

Question

I am in the process of upgrading my Angular app from v15 to v16 and as per docs I updated the @ng-bootstrap/ng-bootstrap package to v15. As a result of this all the NgbModals are not working properly in the UI, every time I open one it has a black overlay and its inactive. Any insights on how to solve this.

It has a z-index property set to element.style { z-index: 1055; }

I am also attaching my package.json for reference.

If I try removing the z-index it works fine but I cant do that from my global styles.scss

Answer 1

Such problems are usually caused by imported additional packages (material - css-vars-ponyfill etc.) If you cannot find the source of the problem, you can add the following codes into the global style.css file.

.modal-backdrop {
  z-index: xxx !important; 
 }