Add Material Design for Bootstrap 4 to an Angular project

featured_image

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

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:

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:

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

Install the required, according to the MDB docs, dependencies: chart.js@2.5.0@types/chart.jsfont-awesomehammerjsangular5-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

    Then add it to the @NgModule metadata’s imports array where a list of the modules required by your app is stored:
  • Import NO_ERRORS_SCHEMA that allows using any property on any element:

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

The file should contain the following code:

Confirm that the theme has been applied correctly

Launch the server:

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:

Angular_with_mdb
Default Angular landing page enhanced with the Material Design for Bootstrap

Commit the changes

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

Photo by Filip Mroz on StockSnap

 

Leave a Reply

Your email address will not be published.