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 (v16), Node LTS (v16 or v18) 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

Important: please note that MDB Advanced is composed of core UI Kit (Essential) and Plugins and cannot be installed with npm install command. You will find more information on how to add plugins to your project here.

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 6
  • 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 (v16), Node LTS (v16 or v18) 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.

Important: please note that MDB Advanced is composed of core UI Kit (Essential) and Plugins and cannot be installed with npm install command. You will find more information on how to add plugins to your project here.

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:

The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later). 

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

The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later). 

// 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.

Important: please note that MDB Advanced is composed of core UI Kit (Essential) and Plugins and cannot be installed with npm install command. You will find more information on how to add plugins to your project here.

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