22

I'm trying to add the Bootstrap 5 dropdown in Angular 12 it's not working.

I have installed all the necessary packages, added them to the angular.json file.

Copied the exact example from Bootstrap 5 docs still not working.

In angular.json I have given

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.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"
]

Below is my HTML code (same as in Bootstrap 5 docs)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" 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>

I used the command npm i to install the packages without mentioning any version name so I guess the latest version was installed. Installed jQuery as the last resort read somewhere Bootstrap 5 doesn`t require jQuery. Any help is greatly appreciated.

6 Answers 6

66

According to Bootstrap 5 (Separate section), Bootstrap 5 requires @popperjs/core but not popperjs. Hence you were installing and importing the wrong library.

FYI, Bootstrap 5 removed dependency on jQuery.


Solution 1: Install @popperjs/core

Pre-requisite: You have installed Bootstrap 5 with

npm install bootstrap@5
  1. You are required to install @popperjs/core as dependencies. Via npm
npm install @popperjs/core
  1. Import @popperjs/core into angular.json. Popper (library) must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

angular.json

"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Solution 2: Import Bootstrap as bundle

Pre-requisite: You have installed Bootstrap 5 with

npm install bootstrap@5

Bootstrap bundle includes Popper for our tooltips and popovers. Hence you no need to install @popperjs/core separately.

  1. Import the Bootstrap bundle to the angular.json scripts array.

angular.json

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Solution 3: Angular Bootstrap

Angular Bootstrap Dropdown is another option that makes Bootstrap works in Angular App.

  1. Install Angular Bootstrap (NG Bootstrap).
npm install @ng-bootstrap/ng-bootstrap
  1. Add NgbModule into app.module.ts imports section.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [.., NgbModule]
})
  1. Apply Angular Bootstrap Dropdown directive.
<div ngbDropdown class="dropdown">
  <button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false">
Dropdown button
</button>
  <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
    <li><a ngbDropdownItem href="#">Action</a></li>
    <li><a ngbDropdownItem href="#">Another action</a></li>
    <li><a ngbDropdownItem href="#">Something else here</a></li>
  </ul>
</div>

Sample Solution 3 on StackBlitz

12
  • 2
    only the third solution worked . when i installed poper core it showed an error and clicked on the dropdown button (both solution 1 and 2 ) it showed Uncaught TypeError: i.createPopper is not a function at pt._createPopper (node_modules\bootstrap\dist\js\bootstrap.min.js:6) inbw thanks for the solution no 3 . even though it wasn't what i was looking for ,it still got the job done Commented Aug 28, 2021 at 5:57
  • 1
    solution 2 too didnt work. Only ngb Module is working Commented Aug 28, 2021 at 8:48
  • 1
    Solution 3 is OK.
    – Emre
    Commented Feb 7, 2022 at 18:49
  • 5
    Solution 1 for me worked. To work that give build before. If you are on run time and make these changes it will not work.
    – Leandro
    Commented Feb 23, 2022 at 16:11
  • 2
    You must include the Javascript libraries in the order above (Option 1) Commented May 24, 2022 at 14:23
26

Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown

See the bootstrap documentation to more information.

5
  • 1
    I don't know why this was downvoted, but it was the correct answer for my issue. Specifically, if you are migrating from Bootstrap 4 to Bootstrap 5 this syntax will need to be updated. Commented Jan 5, 2022 at 17:13
  • 1
    wow, so many hacks - this is what solved it. only included in my angular.json the bootstrap.bundle version - and everything worked
    – Ricky Levi
    Commented Jan 30, 2022 at 12:36
  • This is the correct answer! X3
    – MacD
    Commented Oct 10, 2022 at 17:05
  • This approach worked for me... Thanks a lot.
    – Rubens
    Commented Jun 20, 2023 at 2:26
  • This is the best solution. Commented Aug 11 at 5:33
0

People, I was looking for a solution and, in my case, I was using Bootstrap 5x version. I just has uninstall that version (npm uninstall bootstrap) and install the last current version of 4x version release (npm install bootstrap@4 --save).

0

I was using Bootstrap Bootstrap v5.3.2 & Angular: 17.1.0. to solved this issue I have install

npm install @popperjs/core

added below dependencies' in angular.js & restart application.

    "./node_modules/@popperjs/core/dist/umd/popper.min.js"
0

Hi I was facing this Issue when i was using Bootstrap 5 & angular12

<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false">Dropdown button
      </button>
    
    **And in angular.js**
    "scripts": [
                  "./node_modules/jquery/dist/jquery.min.js",
                  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
                  "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
                ]
0

If dropdown or other things still do not work, you can put these codes in the index.html file after the <app-root></app-root>:

<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>
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jun 19, 2023 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.