Angular - Bootstrap: Modal not opening from button dropdown menu

Question

I have three components - app, sideNav and wallForm. In the app header, I have a button that drops down the sideNav. The sideNav has an add button which opens the wallForm modal. This is an ng2-bootstrap modal. The drop down menu loads fine, but when I click on the add button, the modal loads and the screen greys out (disabled), but the modal does not show in the front. I know it has loaded because I can inspect the element in browser developer tools. I tried setting the z-index of the modal to a very high number, much higher than that of the drop down menu and that didn't help. How do I get the modal to behave as it should i.e., display on top? Code below: <!--app.html-->

<!-- Nav bar -->

<!-- Brand and toggle get grouped for better mobile display -->

Walls

<!-- /.container-fluid -->

Run code snippetExpand snippet <!-- sidenav.html -->

<!--<li *ngFor="let wall of walls" class="wallListItem">-->
• {{wall.Item.Title}}

+ add wall

<!--Modal dialog--> <!--this is the modal body--> Run code snippetExpand snippet

× {{modalTitle}}

<!-- content excluded for brevity -->

Run code snippetExpand snippet JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Well I cant tell you why bootstrap drop down is causing you an issue. I also suffered from bootstrap drop down issues as well. however here is a possible work around. try using an angular plugin for your drop down, I use this one https://github.com/pleerock/ng2-dropdown. For the modal I also use an angular2 plugin because of bootstrap issues, ng2-modal found here https://www.npmjs.com/package/ng2-modal Here is a working plunker of the final product plunkr