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>

what error you are getting?

Aravind
– Aravind

2017-06-23 07:54:03 +00:00
Commented Jun 23, 2017 at 7:54 — Aravind
– Aravind, Commented Jun 23, 2017 at 7:54
You are not using ng2-bootstrap/ngx-bootstrap?

Akkusativobjekt
– Akkusativobjekt

2017-06-23 07:54:12 +00:00
Commented Jun 23, 2017 at 7:54 — Akkusativobjekt
– Akkusativobjekt, Commented Jun 23, 2017 at 7:54

Carl Binalla · Accepted Answer · 2017-06-23 07:47:49Z

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>

Bhargav Mummini · Accepted Answer · 2017-06-23 07:56:57Z

1

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

answered Jun 23, 2017 at 7:56

Bhargav Mummini

3552 silver badges6 bronze badges

Comments

Joee · Accepted Answer · 2018-12-07 12:39:20Z

1

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

answered Dec 7, 2018 at 12:39

Joee

2,05422 silver badges21 bronze badges

Collectives™ on Stack Overflow

Bootstrap Dropdown Angular2 not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related