Add Material Design for Bootstrap 4 to an Angular project

Material Design for Bootstrap 4 provides an Angular Bootstrap UI KIT. It’s built with Angular 6, Bootstrap 4 and TypeScript and can immediately transform the look and fell of your application. Let’s add its features to an Angular project.

Requirements

• npm, remember that the Node.js has to be installed. Check out the post about managing project dependencies with npm if your project lacks a javascript package manager.
• Angular CLI – a command line interface tool that generates a project as well as performs many development tasks.

Apply MDB

Create a new branch

We want to keep features in our project separated and merge them to the develop branch only when they are completely finished. Create a new branch in your repository:

$ git checkout -b feature/mdb_theme

Make sure your Angular project supports Sass

If you rely on the default Angular settings, all projects generated with the CLI depend on .css files. MDB requires .scss support but no matter if you’re creating a fresh app or you have already generated a project – you can modify its CSS preprocessor easily. Check out the How to change a CSS preprocessor in Angular post to adjust the project.

Install the theme and its dependencies

After you had adjusted your Angular project to sass, you can go to the project’s main directory and download the theme with npm:

$ npm install --save angular-bootstrap-md

Add paths to the style and javascript files into the angular.json:

// angular.json
"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
           …
            "styles": [
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          },

Install the required, according to the MDB docs, dependencies: chart.js@2.5.0, @types/chart.js, font-awesome, hammerjs, angular5-csv:

$ npm install --save chart.js@2.5.0 @types/chart.js font-awesome hammerjs angular5-csv

Update imports in app.module.ts

You’ve just added a new library, so you need to make it available through the app by importing it into AppModule.

• Import MDBBootstrapModule

  // src/app/app.module.ts
  import { MDBBootstrapModule } from 'angular-bootstrap-md';

  Then add it to the @NgModule metadata’s imports array where a list of the modules required by your app is stored:

  // src/app/app.module.ts
  imports: [MDBBootstrapModule.forRoot()],

• Import NO_ERRORS_SCHEMA that allows using any property on any element:

  // src/app/app.module.ts
  import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

  Now, you can make elements and properties that are neither Angular components nor directives allowed in the NgModule –  declare in the schemas:

  schemas: [ NO_ERRORS_SCHEMA ]

The file should contain the following code:

// src/app/app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
…

@NgModule({
…
    imports: [MDBBootstrapModule.forRoot()],
    schemas: [ NO_ERRORS_SCHEMA ]
});

Confirm that the theme has been applied correctly

Launch the server:

$ ng serve --open

Thanks to the --open option the app is automatically started in your browser on http://localhost:4200/. Angular watches the app’s files and repeatedly rebuild the project in case of any changes detected.

Even on a freshly created app, you can notice new styles:

Commit the changes

You can ascertain the files affected by applying the theme and commit the changes:

$ git status
On branch feature/mdb_theme
Changes not staged for commit:

	modified:   angular.json
	modified:   package-lock.json
	modified:   package.json
	modified:   src/app/app.module.ts

$ git add -A
$ git commit -m "Material Design for Bootstrap applied."

Photo by Filip Mroz on StockSnap