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=".3.1/css/bootstrap.min.css">
  <script src=".4.1/jquery.min.js"></script>
  <script src=".js/1.14.7/umd/popper.min.js"></script>
  <script src=".3.1/js/bootstrap.min.js"></script>

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>

• javascript
• jquery
• angular
• bootstrap-4
• popper.js

• Have you any error in browser console? – Ali Maleki Commented Dec 17, 2019 at 8:40
• No error in browser or developer tool. I've edited the question. – 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 Commented Dec 17, 2019 at 8:49
• I have tried and it is still not working. – Andrew_SF Commented Dec 17, 2019 at 9:12
• 1 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 Commented Dec 15, 2020 at 13:26

6 Answers 6

The solution to the dropdown menus is to have

data-bs-toggle="dropdown"

instead of

data-toggle="dropdown"

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>

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>

(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

1. Add "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" in angular.json > build.options.scripts[]
2. 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>

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"] 

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>