Bootstrap 4 dropdown not working with Angular 12

Question

I have a sample Angular 12 project with Bootstrap 4. Everything is working in my project except the dropdown.

This SO answer was not working for me.

I have installed jQuery, Popper and Bootstrap in my project using the NPM commands given :

npm install --save @popperjs/core
npm install --save bootstrap
npm install --save jquery

I also referred them from the angular.json :

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

I'm getting no error and also dropdown button is coming. But the issue is that the list is not popping up as soon as I clicked.

The sample code is given below that I took from Bootstrap Dropdown Official Docs for testing.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </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>
</div>

Am I missing something which need to be added ?

When I run npm install --save bootstrap it installs Bootstrap 5 so the sample code for the dropdown button supplied above won't work. Try the following code for the dropdown button — Clive Seebregts
– Clive Seebregts, Commented May 28, 2021 at 16:07
stackblitz.com/edit/… here is your working example @AnishB. — Gaurang Dhorda
– Gaurang Dhorda, Commented May 28, 2021 at 16:35

Onur Özkır · Accepted Answer · 2021-05-28 19:36:59Z

4

it worked for me

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

Edit : omg. this issue was very tiring for me. i worked on it for a few hours. and the problem was solved in an unnoticed way and i don't understand the cause. i had to read bootstrap.js for this lol. just change the expression data-toggle="dropdown" to data-bs-toggle="dropdown" in the html file.

so :

in html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </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>
</div>

Note: The angular.json example i shared above is still running.

edited May 28, 2021 at 19:36

answered May 28, 2021 at 14:42

Onur Özkır

5453 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Anish B. Over a year ago

Let me try this.

Onur Özkır Over a year ago

nothing seems wrong. did you restart the application with "ng serve" after refreshing the script sequence?

Anish B. Over a year ago

Yes ! restarted everything. Still no success. Did you try with Angular 12 ?

Onur Özkır Over a year ago

i am using angular 11. i am going to open a new project and try it

Onur Özkır Over a year ago

i updated the comment and yes it solved the problem

|

Michael · Accepted Answer · 2021-10-15 10:23:19Z

0

Yep solution worked for me thanks!

However I didn't update angular.json as per above, instead added the bootstrap dropdown module in app.module.ts i.e:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  declarations: [
    .....
  ],
  imports: [
    ...
    ,BsDropdownModule.forRoot()
    ...
  ]
  ,bootstrap: [AppComponent]
})
export class AppModule { }

answered Oct 15, 2021 at 10:23

Michael

1

Collectives™ on Stack Overflow

Bootstrap 4 dropdown not working with Angular 12

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related