Skip to main content

How to include Bootstrap & Jquery in Angular 11 app

 3 Steps:

  1. Step 1 : Installing Angular CLI
  2. Step 2: Installing Bootstrap and Jquery in our project
  3. Step 3: Adding Bootstrap and jquery in our project using angular.json  

Step 1 : Installing Angular CLI 

If Angular CLI is not installed in your machin yet, Install it firs by using the below command in a new terminal.

$ npm install -g @angular/cli

Now, Create a new Angular project by using the ng utility.

$ ng new myApp

Now navigate to your root of the project by using 

$ cd myApp

Now we can serve the Angular app by using 

$ ng serve

This command will run the application in the default port http://127.0.0.1:4200/

Step 2 — Installing Bootstrap & Jquery in Your Angular Project

Go back to your command-line interface and install Bootstrap 4 via npm as follows:

$ npm install bootstrap

Next, you also need to install jQuery using the following command:

$ npm install jquery

Step 3 :  Adding Bootstrap & Jquery to Angular Using angular.json

Now open angular.json file from your project root

In your projects->architect->build->styles array,

node_modules/bootstrap/dist/css/bootstrap.css

In your  projects->architect->build->scripts array,

node_modules/bootstrap/dist/js/bootstrap.js
In your   projects->architect->build->scripts array,
node_modules/bootstrap/dist/js/bootstrap.js
Now restart your server and Bootstrap and Jquery is added into your application.

Image taken from freepik

Labels:
Location: Theni, Tamil Nadu, India

Comments

Post a Comment

Popular posts from this blog

When there is.... It matters!

When there is no wind... It matters to see a tree dance! When there is no way home... It matters to keep a thin memory! When there is no light... It matters to keep a lighter! When there is no sweetheart... It matters by surrounded with friends! When there is no sweet memory to remember... It matters to create them by own! When there is no achievement... It matters to grab an opportunity! When there is no plan... It matters to hit hard the goal! When there is a heart... It matters to keep it unbroken! When there is  no knowledge... It matters to get rich! When there is no path... It matters to keep thoughts clear! When there is   no hope... It matters to keep motivated! When there is no life... It matters to remember YOU ARE THE LIFE
1 comment
Read more

Bulma Installation in Angular app.

Bulma + Angular using NPM Why NPM? Whenever we need a package in our Angular application, we'll be using npm to bring in the package. This is the way the Angular ecosystem is working. We need lots of packages to build something greater. Installing Bulma: This will bring the entire Bulma project into our node_modules folder. The --save flag will add this dependency to our package.json Add Bulma in Angular app: For Angular applications, all starting configuration happens in the angular.json file. In that file, you'll find a styles array where we can add any CSS files we want to add to our project. You'll also find a script array where you can add scripts if you need that. ( Refer here for including Jquery and Bootstrap ) Restart the angular server ( ng serve ). Now you can able to use all the incredible features of Bulma CSS in your Angular application.  Let's make something awesome with Bulma.
Post a Comment
Read more

The road we all walk...

In a world of closed minds and hearts, He stands apart, a breath of fresh air,  With eyes wide open and a curious soul, He dares to explore what others declare. Surrounded by people who refuse to see, The beauty and wonder that lie ahead, He walks his own path, unafraid and free, With an open mind and an open heart, he treads. He listens to different perspectives, And welcomes diverse points of view, He learns from all, never selective, And embraces what is true. His mind is a canvas, always open, To the colors and strokes of life, He sees the world as a masterpiece unbroken, And revels in the magic of its strife. Though some may judge and criticize, And close their minds to what they don't know, He remains true to his beliefs and tries, To share the joy and wonder he has come to know. For in a world of closed minds and hearts, He is a beacon of hope and light, With his open mind, he sets apart, A path that's honest, true, and right.
Post a Comment
Read more