3

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.

Improve this question

4 Answers 4

Reset to default
3

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I'm not sure if this was the right answer for this particular question, but man, did you save my life after 1.5 days of trying to implement typeaheads in Ang4, I would upvote you 100 times if I only could
If you copy paste your reply on my question I can accept and upvote it: stackoverflow.com/questions/46112808/…
Will do, glad it helped!
1

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.

Improve this answer

Comments

1

i was able to get this working with [email protected], 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.

Improve this answer

1 Comment

Thanks for this tidbit - led me to a solution. I'm still not entirely clear on why this needs to be imported both in the root and in the relevant functional module, but this will do the trick (no "forRoot()" in the functional module)
1

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.