Bootstrap Dropdown Angular2 not working

Question

Is it a problem with my browser that this dropdown is not working?

I wanted to add a dropdown menu in a navbar in one of my projects and it wasn't opening, so i took the example from bootstrap and it doesn't even work in a code snippet on jsfiddle.net . I am using Angular2

 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

Answer 1

It is working, just add the .js file of Bootstrap and jquery.min.js

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria- expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> 

Answer 2

Basically, Dropdown requires Jquery and bootstrap.js to be included in the page.

In Angular , you will not be requiring JQuery . But, bootstrap.js is fully dependent on JQuery .

So the alternative for bootstrap.js in Angular is ngx-bootstrap ( https://github.com/valor-software/ngx-bootstrap ). By adding ngx-bootstarp as a dependency to your project will help you. Thanks for Volarkin for developing it.

Example http://valor-software.com/ngx-bootstrap/#/dropdowns

Answer 3

I faced similar issue that Nav bar dropdown not working. I fixed it by following the below steps.

In Angular.json add below lines

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",  
          "node_modules/bootstrap/dist/js/bootstrap.min.js",  
          "node_modules/popper.js/dist/umd/popper.min.js"
        ]

"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ]

Because bootstrap has dependencies on both jquery and popper.js