Bootstrap 5 dropdown not working on angular 12

Issue

I'm trying to add bootstrap5 drop down in Angular12 it's not working.
I have installed all the necessary packages, added them in the angular.json file.
Copied the exact example from bootstrap5 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 don`t require jquery. Any help is greatly appreciated.

Solution

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

FYI, Bootstrap 5 removed dependency on jQuery.

---

Solution 1: Install @popperjs/core

1. Install @popperjs/core via npm

npm install @popperjs/core

2. Import @popperjs/core into angular.json. Popper 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

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

angular.json

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

---

Solution 3: Angular Bootstrap

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

1. Install Angular Bootstrap (NG Bootstrap).

npm install @ng-bootstrap/ng-bootstrap

2. Add NgbModule into app.module.ts imports section.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [.., NgbModule]
})

3. 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

Answered By - Yong Shun