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-guide/install-node-js-on-windows/For Linux:
https://www.geeksforgeeks.org/node-js/installation-of-node-js-on-linux/ Knowledge of setting up of an Angular Project https://www.geeksforgeeks.org/angular-js/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
Installation of @angular/cdk
- Install "angular-bootstrap-md" package
npm install angular-bootstrap-md --save
Installation of MDB Angular (Free Version)
- In "app.module.ts", import "MDBBootstrapModule" as given below:
javascript 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
Installation of Third-party libraries
- Update "angular.json" file by importing the .css and .js files in styles and scripts arrays from node_modules as given below:
javascript { "$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:
html <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:
