Angular Bootstrap With Material Design - Beginner Tutorial | Full Installation of MDB Angular

Hello Viewers: In This Tutorial you learn how to setup angular bootstrap with material design in your system.

After watching this tutorial you will be able to install angular bootstrap with material design in your system.

There also I will tell you how to install node.js and visual studio code.

This video tutorial contains from start to end set up of #angular #bootstrap with #material #design. …………………….

Download node js: https://nodejs.org/en/

Download Visual Studio Code: https://code.visualstudio.com/download

Install Angular Bootstrap With Material Design

Commands: Angular With MDB:

npm install -g @angular/cli

Step 1: Create new angular project using Angular CLI command: ng new gyanniti --style=scss

cd gyanniti

Step 2: Open the project in the code editor

Step 3: Install @angular/cdk package (required only for MDB Angular version 9.0.0 and later): npm install @angular/cdk --save

Step 4: Install MDB Angular Free: npm install angular-bootstrap-md --save

Step 5: Update the app.module.ts file with the following code: ---

import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ]
});

--- Step 6: Update styles and scripts arrays in angular.json file: ---

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

---

Step 7: Install external libraries npm install -–save chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

Step 8: Run application ng serve --o