How to implement normal Bootstrap to Angular application?

I also want to know that sometimes the navbar class, collapse class and dropdown, toggle button are not supported in the angular application even when we install the bootstrap with scripts.

What I want to know is how can I able to achieve every Bootstrap class support to Angular Application at a single time.

Kindly help me. Thanking you!

Bootstrap depends on the jQuery and popper.js libraries, and if you don’t include them in your project, any Bootstrap components that rely on JavaScript will not work.

A better way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as ng-bootstrap and ngx-bootstrap

you want to add bootstrap 5 as an npm package like so

npm install bootstrap@next

In your angular.json add bootstrap stylesheet and javascript

"styles": [
  "src/scss/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
],

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

Now add popperjs and add it to your scripts

npm install @popperjs/core

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

Add a dropdown component to your app.component.html

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