Angular 2 Bootstrap (ngx-bootstrap/ng2-bootstrap) dropdown not working

Question

I can only seem to get Angular Bootstrap dropdowns to work in one part of my application. I'm not sure why it works there and not in other places. In my module, I'm importing with BsDropdownModule.forRoot() just like it is where it works. I've tried pasting in HTML from several of their examples... Nothing. I know I had it working there before, and don't remember changing anything that had to do with it.

I'm not getting any errors and I'm not exactly sure how to proceed with troubleshooting this issue. I noticed the problem with ng2-bootstrap, so I upgraded to ngx-bootstrap. Same problem.

Answer 1

You need to add BsDropdownModule.forRoot() in the AppModule imports and BsDropdownModule (not .forRoot()!) in the submodule that uses the bootstrap dropdowns

Answer 2

Make sure that your versions of Angular and that of Bootstrap are compatible. It happened when I was using Angular 4 with ng2-bootstrap 1.6.x. Better yet, instead of ng2-bootstrap you should be using ngx-bootstrap. To get the dropdown working, add the container attribute:

<div class="btn-group" dropdown  container="body"></div>

Answer 3

i was able to get this working with bootstrap@4.0.0-alpha.5, but when i switched to 4.0.0-alpha.6 i could not get the dropdown to work. Not sure what went wrong but I had to add BsDropdownModule into context by adding to my providers (I already had the BsDropdownModule.forRoot()).... (not exactly sure of details of what i had broken in the end).

BUT found that adding BsDropdownModule to the module where i was calling the menu then it worked.

Answer 4

I figured out the issue. The dropdowns were actually working. The issue was that for some reason the y-position (top) for the .dropdownMenu was placing it beyond the bounds of the container it resided in, where it could not be seen. I'm still not sure why THAT is happening, but at least I have something to work with.