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

Keep in mind that the Single Use license does not allow installation via gitlab link. The only option for this type of package is manual 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://oauth2: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

Keep in mind that the Single Use license does not allow installation via gitlab link. The only option for this type of package is manual 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.

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://oauth2: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" />

Install specific version

When you install MDB from our GitLab server, the latest version of the library will be downloaded by default. You can add #version_number at the end of the installation command in order to install specific MDB version. 


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