Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Bootstrap Dropdown not working in Angular Fullstack

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>

How it Looks in Angular FullStack

like image 594
David Cruwys Avatar asked Oct 20 '15 04:10

David Cruwys


People also ask

Why is my bootstrap dropdown not working in angular?

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!!!

Why is my bootstrap drop down not working?

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.


1 Answers

Upgrade Angular UI in bower.json:

"angular-bootstrap": "~0.14.3",

Then run:

bower install
like image 111
mooses Avatar answered Sep 23 '22 03:09

mooses