Angular 6 ngb-bootstrap modal not showing because of bootstrap css contained for a div

Question

I know there are lots of questions regarding modal not showing and I have it working in places already, but this one is different!

I have a Wordpress project where I am showing an Angular app in the admin. The app has Bootstrap 4 used. So I did not want to effect the Wordpress admin with the Bootstrap 4 css when the Angular app loads.

To make it work, I used a method where the app is wrapped by a div with a class="bootstrap" and I used less to convert the bootstrap css such that it all is surrounded by the .bootstrap class. Therefore a class .text-danger is written like .bootstrap .text-danger and it works perfect! My admin is not effected by the bootstrap css and yet the angular app inside the admin is isolated.

Now the problem is when I try to add ngb-modal to the game! It apparently adds the modal and its backdrop elements right before the body tag which is outside the bootstrap wrapper div and therefore the isolated css does not apply on these elements.

Is there a way that when I call the modal like below, it is added with a wrapping div element like this <div class="bootstrap">...ngb-modal code here...</div>?

const modalRef = this.modalService.open(MyModalComponent);

I hope I explained the issue well!

Imran Ahmed Imran Ahmed · Accepted Answer · 2018-12-20T07:10:38

I found the solution!

It is to call the modal like this:

// Create modal options
const modalOptions: NgbModalOptions = {
    container: '#id_my_bootstrap_container'
};

// Show the modal
const modalRef = this.modalService.open(MyModalComponent, modalOptions);

The div should have the id applied:

<div class="bootstrap" id="id_my_bootstrap_container">...ngb-modal code here...</div>

This will create the modal inside that div instead of creating it under body tag and thus the modal css applies to it even if it is prefixed by bootstrap class.

Angular 6 ngb-bootstrap modal not showing because of bootstrap css contained for a div

1 Answers