How to install and use bootstrap, jquery in angular?

 In this tutorial, you will learn how to create a new angular application and how to install and use bootstrap, jquery in our angular 8 application?.

Bootstrap and jquery both are widely used framework in the developer industry. Same time angular also a fast-growing framework, So if you want to use bootstrap and jquery in your angular application you are in the right place.

Let's start the integration.

1. Launch the command prompt and change the directory where you want to create a new application.

2. Create a new application using the command of ng new myapp.

After executing the command Angular CLI will ask, would you like to add Angular routing?

If you need it, then yes.otherwise skip it, we can create app routing module later.

Then Angular CLI will ask again, which stylesheet format would you like to use?

Choose CSS or scss which one you are going to use.

Now myapp application created successfully.

3. Open visual studio code editor and open folder of your project File >Open Folder

4. Now our application ready to run.Go to the visual studio terminal Terminal > New Terminal and run our application using the command of ng serve --open

5. Our first angular application running perfectly, Now we will integrate bootstrap, jquery in this application. Open a new terminal and Install bootstrap, jquery using the command of

npm install bootstrap

npm install jquery

6. Bootstrap and jquery will be installed in node_modules folder that we have to configure in angular.json file

7. Open angular.json file and configure the path in styles and script section. Make sure the sequence of file and save all the changes in the editor.

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

8. We will test our bootstrap and jquery working properly working or not. Open our app.component.html and delete the existing code and include the bootstrap button.

app.component.html

<button class="btn btn-primary">submit</button>

app.component.ts

import { Component } from '@angular/core';
import * as $ from 'jquery';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    $(document).ready(() => {
        console.log('Jquery alert');
    });
}
}

Save all changes and run your application

Notes : If you are not able to get the bootstrap CSS, terminate your terminal using the command of ctrl+ c and type yes and run your application again using the command of ng serve --o