Angular 7 Lesson 4 - How to add jquery and bootstrap to angular app

How to add jquery and bootstrap to angular app

Video link:

Full Angular tutorial list :

 https://blog.myzingonline.com/p/angular-7.html

Step 1: Install jquery

npm install jquery –save

npm install @types/jquery --save

Step 2: Import jQuery in app.module.ts.

import * as $ from 'jquery';

Step 3: Import jQuery in app.component.ts.

import * as $ from 'jquery';

Step 4: Add reference for file in angular.json

"scripts": ["node_modules/jquery/dist/jquery.min.js"],

Step 5: Component add jquery test code

Adding bootstrap

Step 1: npm install bootstrap --save

npm install popper.js --save

Step 2: add file to angular.json

 "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "src/styles.css"

            ],

 "scripts": [

              "node_modules/jquery/dist/jquery.min.js",

              "node_modules/popper.js/dist/umd/popper.min.js",

              "node_modules/bootstrap/dist/js/bootstrap.min.js"

            ],

Add a sample code for bootstrap in template

<div class="col-12 py-3">

  <div class="row">

    <div class="col-sm-6">

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

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

    </div>

</div>

</div>

Share on Google Plus

About myzingonline

Myzingonline is all about zing to share experience, knowledge, likes, dislikes and ideas of a person to the world.