Menu
I have copied code directly form the Angular Bootstrap UI Plunkr
I am using a blank Angular FullStack (Mean) template for building an application.
When I use the code from the Angular Bootstrap uib-dropdown it ends up formatted incorrectly and does not work, all other angular bootstrap components seem to work fine
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
594
You have to make sure that popper. js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4. It works!!!
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Upgrade Angular UI in bower.json:
"angular-bootstrap": "~0.14.3",
Then run:
bower install
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
