MDBootstrap Introduction and Installation for Angular

Introduction: MDBootstrap (Material Design for Bootstrap) is a complete UI package that can be integrated with other frameworks such as Angular, React, Vue, etc. It is used to design a fully responsive and mobile-friendly layout using various components, plugins, animations to make it more attractive and user friendly which are compatible with other browsers.

Features of MDBootstrap:

• An open-source tool which can be downloaded easily.
• Fully responsive to different devices.
• Various UI Components are present which makes developers tasks easier.
• Provide lots of animations and icons.
• Amazing look and feel of the applications.

Prerequisite:

• A code editor like VS Code, Sublime, Brackets, etc.
• NodeJS should be installed in the system.

For Windows:

https://www.geeksforgeeks.org/installation-of-node-js-on-windows/

For Linux:

https://www.geeksforgeeks.org/installation-of-node-js-on-linux/

Knowledge of setting up of an Angular Project
https://www.geeksforgeeks.org/angular-cli-angular-project-setup/

Installation of MDBootstrap in Angular:

• Install “@angular/cdk” package (required if MDBootstrap Angular version is greater than or equal to 9.0.0)

  npm install @angular/cdk --save

  

• Install “angular-bootstrap-md” package

  npm install angular-bootstrap-md --save

  

• In “app.module.ts”, import “MDBBootstrapModule” as given below:

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { MDBBootstrapModule } from 'angular-bootstrap-md';
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      MDBBootstrapModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

• Install other third party libraries like for animation
  

  npm install -–save chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

  

• Update “angular.json” file by importing the .css and .js files in styles and scripts arrays from node_modules as given below:

  {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "myNewApp": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/myNewApp",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.app.json",
              "aot": true,
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "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"
              ]
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "6kb",
                    "maximumError": "10kb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "myNewApp:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "myNewApp:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "myNewApp:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.spec.json",
              "karmaConfig": "karma.conf.js",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "tsconfig.app.json",
                "tsconfig.spec.json",
                "e2e/tsconfig.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          },
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "myNewApp:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "myNewApp:serve:production"
              }
            }
          }
        }
      }},
    "defaultProject": "myNewApp"
  }

• In “app.component.html” add the following code to use MDBootstrap components with Angular as given below:

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-4">
        <div class="md-form">
          <input mdbInput type="text"
              id="name" class="form-control">
          <label for="name">Enter Name</label>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-4 d-flex justify-content-center">
        <button mdbBtn type="button"
                       gradient="peach"
                       rounded="true" mdbWavesEffect>
            Save</button>
      </div>
    </div>
  </div>

• Then run the application after saving it using following command:

  ng serve -o

Output: