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/css/all.css';
// 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