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?

Answer 1

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.

Answer 2

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 ie:

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

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