How to Install, Add, and Use Bootstrap and jQuery with Angular A Comprehensive Guide

Bootstrap and jQuery can be used with Angular by including their respective JavaScript files in the project and then referencing them in the Angular component or module that needs them.

Here are the steps to use Bootstrap and jQuery with Angular:

Install Bootstrap and jQuery:

npm install bootstrap jquery --save

In the angular.json file, add the CSS and JS files to the styles and scripts arrays respectively:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

In the component or module where you want to use Bootstrap and jQuery, import them:

import * as $ from 'jquery';
import 'bootstrap';

Use Bootstrap and jQuery as needed in your code. For example, to show a Bootstrap modal dialog when a button is clicked:

<button (click)="showModal()">Show Modal</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        Modal body
      </div>
    </div>
  </div>
</div>

showModal() {
  $('#myModal').modal('show');
}

Note that the above example assumes that you have a basic understanding of Angular components and templates. If you’re not familiar with these concepts, you should first learn them before trying to use Bootstrap and jQuery with Angular.