Bootstrap dropdown not working in angular 8 project

Question

I've installed the following packages:

npm install --save bootstrap@3
npm install --save popper.js angular-popper
npm install jquery --save

And added the styles and scripts in the angular.json file in this order:

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

Then just followed the official example:

<div class="container headerComponent min-height-header">
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
</div>

The styles seems to display correctly, but the caret is not showing and nothing happens on click.

No error in browser or developer tool.

I have realized however that in the sources tab of the developer tool, only boostrap.min.css is included through node_modules.

The only solution for me right now is adding the links in the header of index.html like this:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

No error in browser or developer tool. I've edited the question. — Andrew_SF
– Andrew_SF, Commented Dec 17, 2019 at 8:46
Looking at your code, it all seems fine... have you tried running a ng build after making changes to the angular.json file — Craig Wayne
– Craig Wayne, Commented Dec 17, 2019 at 8:49
Did you ever get a solution to this problem? I have the same issue. Like you I don't want to add it to index.html — Sniipe
– Sniipe, Commented Dec 15, 2020 at 13:26

Isabel Vallejo Gomez · Accepted Answer · 2021-07-22 15:32:05Z

11

The solution to the dropdown menus is to have

data-bs-toggle="dropdown"

instead of

data-toggle="dropdown"

answered Jul 22, 2021 at 15:32

Isabel Vallejo Gomez

1111 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurabh Rana Over a year ago

Thanks a lot for sharing this. For me it was the other way round. I had to remove 'bs' for the dropdown to work.

Sundas Riasat · Accepted Answer · 2019-12-17 08:50:10Z

That is because you don't have the aria-labelledby attribute on your dropdown-menu div and id on your dropdown button. I'm writing the correct version below:

<div class="container headerComponent min-height-header">
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" id="dropdownMenuButton" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

Abdullah Abid · Accepted Answer · 2020-04-04 18:33:08Z

2

add the links in the header of index.html. your problem will be solved

 <!-- BootStrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <!-- JQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <!-- Popper --> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- BootStrap JS -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

edited Apr 4, 2020 at 18:33

Abdullah Abid

1,6613 gold badges12 silver badges24 bronze badges

answered Apr 4, 2020 at 18:19

mintukrishnan s

2803 silver badges7 bronze badges

1 Comment

cristian.d Over a year ago

It should work with npm, this is not a real solution to the question.

JimiSweden · Accepted Answer · 2021-09-24 21:28:19Z

(I know this question was for Angular 8 and bootstrap 4, but this was the best thread I found in my shallow search)

Working solution for me with Bootstrap 5 and Angular 12.

Note that you have to restart the server (i.e "npm start") when you make the changes in angular.json

Add "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" in angular.json > build.options.scripts[]
Ensure you have the 'data-bs-toggle="dropdown"' in your button-element, as mentioned by @isabel-vallejo-gomez

My setup:

Note that you don't need popper.js installed as a dependency, it is bundled in boostrap.bundle.min.js

"dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "bootstrap": "^5.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

in angular.json

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/AngularRecipesApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },

in your html

from bootstrap 5 documentation https://getbootstrap.com/docs/5.0/components/dropdowns/#single-button


<!-- note: without the  'data-bs-toggle="dropdown"' dropdown will not work , as mentioned by @isabel-vallejo-gomez -->
<div class="dropdown">  
  <button 
    class="btn btn-secondary dropdown-toggle"
    type="button"  
    data-bs-toggle="dropdown"
    aria-expanded="false"
   >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Aadi bhandwalkar · Accepted Answer · 2021-08-17 14:01:25Z

0

Use bootstrap.bundle.min.js or be sure you have Popper.js in your dependencies

like in angularjson -
"scripts": ["node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

answered Aug 17, 2021 at 14:01

Aadi bhandwalkar

11 bronze badge

Comments

kanika madaan · Accepted Answer · 2021-10-26 10:24:47Z

0

Just use data-bs-toggle="dropdown" instead of data-toggle="dropdown".

Reference code -

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </a>

answered Oct 26, 2021 at 10:24

kanika madaan

11 bronze badge

Collectives™ on Stack Overflow

Bootstrap dropdown not working in angular 8 project

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related