CODEWITHSUNDEEP
javascripthtmlangularbootstrap-5angular12
gauthaman vijayan
gauthaman vijayan

Reputation: 265

Bootstrap 5 dropdown is not working on Angular 12

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.

Upvotes: 24

Views: 37868

Answers (6)

Rusiru Kahandagamage
Rusiru Kahandagamage

Reputation: 11

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>

Upvotes: 0

Avinash Khadsan
Avinash Khadsan

Reputation: 497

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

Upvotes: 0

Avinash Khadsan
Avinash Khadsan

Reputation: 497

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"

Upvotes: 0

Pablo Espinoza
Pablo Espinoza

Reputation: 1

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

Upvotes: 0

Yong Shun
Yong Shun

Reputation: 51420

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

Upvotes: 70

Edwin Bautista
Edwin Bautista

Reputation: 301

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

See the bootstrap documentation to more information.

Upvotes: 28

Related Questions