19

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.

Yong Shun
  • 35,286
  • 4
  • 24
  • 46
gauthaman vijayan
  • 215
  • 1
  • 2
  • 5

4 Answers4

57

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

Yong Shun
  • 35,286
  • 4
  • 24
  • 46
  • 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 – gauthaman vijayan Aug 28 '21 at 05:57
  • 1
    solution 2 too didnt work. Only ngb Module is working – gauthaman vijayan Aug 28 '21 at 08:48
  • non of them is working for me – PJoe Dec 15 '21 at 08:59
  • 1
    Solution 3 is OK. – Emre Feb 07 '22 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 Feb 23 '22 at 16:11
  • 2
    You must include the Javascript libraries in the order above (Option 1) – Richard Turner May 24 '22 at 14:23
  • 1
    You saved my day on solution 3! thanks!!! – Gauri Kesava Kumar Jul 20 '22 at 16:42
  • 1
    As @RichardTurner says in the comment above, it is vital that the Javascript libraries are added in the correct order. Popper first then Bootstrap. Solution #1 then worked. Thanks everyone. – Winthorpe Sep 07 '22 at 10:40
  • 1
    solution 1 worked for me but i used data-bs-toggle instead of data-toggle as shown below – RED-ONE Oct 26 '22 at 19:18
  • 1
    Worked solution 1 for me, but important thing except order is that you should restart application – Lube Feb 16 '23 at 11:50
  • 1
    Your solution 3 worked form me for angular 15 and bootstrap 5, after trying lot of things. Thanks a lot. – agileDev Feb 19 '23 at 20:05
  • Solution 1 worked well! just make sure to run `ng serve` after modifying the angular.json or when installing new lib – Ali Aug 09 '23 at 18:16
17

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

See the bootstrap documentation to more information.

Francisco Cabral
  • 856
  • 11
  • 21
Edwin Bautista
  • 181
  • 3
0

if still does not work dropdown or other things. you these codes input the index.html file after the

rusiru madauranga
  • 11
  • 3
  • 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](/help/how-to-answer). – Community Jun 19 '23 at 15:03
0

I had the same problem despite having @popperjs/core installed. Solution 2, adding "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" in angular.json worked for me.

Edwin Mambo
  • 1