MDB Angular 5 Pro installation guide

Manual installation (zip package)

Step 1

Download the package from orders

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Install dependencies


            npm install
          

Step 4

Run the application


            ng serve -o
          

Step 5

Explore our documentation (menu on the left). Choose components you like, copy it to your project and compose your website. And yes, it's that simple!


Advanced installation

Prerequisites

Before starting the project make sure to install Angular CLI (11.x.x), Node LTS (12.x.x or higher) and generate gitlab access token.

Step 1

Create a new Angular app. Choose SCSS stylesheet.


        ng new my-app
      

Step 2

Navigate to app's directory


        cd my-app
      

Step 3

Install library


        npm install git+https://ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential
      

MDB configuration

Step 1

Setup MDB


        ng add mdb-angular-ui-kit
      
  • decide whether to set up Roboto font
  • decide whether to set up Font Awesome 5
  • decide whether to set up browser animations

Step 2

Launch your app


        ng serve -o
      

NPM

Prerequisites

Before starting the project make sure to install Angular CLI (11.x.x), Node LTS (12.x.x or higher) and generate gitlab access token.

Installation

To install MDB UI KIT in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation.


        npm install git+https://ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential
      

Module import

Add imports of individual MDB modules to the app.module.ts to use specific components. For example to use checkbox:


        import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
        …
        @NgModule ({
          ...
          imports: [MdbCheckboxModule],
          ...
        })
      

CSS import

Add MDB styles import to the styles.scss file:


        // MDB SCSS @import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
      

Font Awesome

Install Font Awesome:


        npm i @fortawesome/fontawesome-free
      

Add Font Awesome styles to the `styles.scss` file:


        // Font Awesome @import
        "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import
        "~@fortawesome/fontawesome-free/scss/solid.scss"; @import
        "~@fortawesome/fontawesome-free/scss/regular.scss"; @import
        "~@fortawesome/fontawesome-free/scss/brands.scss"; // MDB SCSS @import
        "~mdb-angular-ui-kit/assets/scss/mdb.scss";
      

Roboto font

Add the following line in public/index.html file inside head section:


        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />