WEB DEVELOPER SITE
PYTHONJAVA
TUTORIALS
 

Angular 7 Bootstrap


In this tutorial, you’ll learn How to install Bootstrap for Angular project?

Creating Angular 7 App

Start by installing the Angular CLI using npm.

// install angular cli
npm install -g @angular/cli

Once you have the Angular CLI installed, create an Angular app using the Angular CLI.

// install angular app
ng new angular-app

The above command creates an Angular boilerplate project.

Add Bootstrap to Angular 7

In order to add bootstrap to Angular 7 you need to install bootstrap and jQuery using npm.

// install jquery and bootstrap
npm install bootstrap jquery

Once bootstrap has been installed, you need to include the bootstrap script and style references in the angular.json under architect -> build key.

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

Save the above changes and you should be able to use bootstrap in the Angular app.

open the angular.json file and add the file paths of Bootstrap CSS and JS files as well as jQuery to the styles and scripts arrays under the build target:

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

Adding A Data Service

After creating a project and adding Bootstrap 4, we have to create an Angular service that will be used to provide some demo data to display in our application.

In your terminal, run the following command to generate a service: