Manual installation (zip package)
Step 1
Download the package from orders.
Step 2
Unzip the downloaded package and open it in the code editor. Inside
package.json file you will find plugins added as
dependencies. The modules and stylesheets for all plugins have been
imported respectively into the app.module and
styles.scss files.
Step 3
We recommend that you remove unnecessary plugins from the project
(package.json,
app.module and styles.scss) in order not to
increase the weight of the application.
Step 4
After selecting the necessary plugins, proceed with the installation.
npm install
Step 5
Explore our documentation (plugins section in the menu on the left). Choose plugin you like, copy it to your project and compose your website. And yes, it's that simple!
NPM - new project
Prerequisites
Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.
Installation
Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.
You can find more information for the specific plugin in its documentation (API section).
To install the MDB ANGULAR 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.
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential
Then install the plugins you want to use:
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar
Importing modules
import { MdbCalendarModule } from 'mdb-angular-calendar';
…
@NgModule ({
...
imports: [MdbCalendarModule],
...
})
Importing SCSS files
To import plugin stylesheet please use the following syntax:
The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later).
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss"; // lib
@import '~mdb-angular-calendar/scss/calendar.scss'; // plugin
NPM - existing project
Prerequisites
Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.
Installation
Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.
To install plugin in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation.
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar
Importing modules
import { MdbCalendarModule } from 'mdb-angular-calendar';
…
@NgModule ({
...
imports: [MdbCalendarModule],
...
})
Importing SCSS file
To import the plugin stylesheet please use the following syntax:
@import '~mdb-angular-calendar/scss/calendar.scss';
Schematics
Prerequisites
Before starting a project make sure to install Node LTS (12.x.x recommended) and generate gitlab access token.
Installation
Note: For this instruction, we will use the Calendar plugin as an example. If you want to use a different plugin remember to change the plugin names and paths.
To install plugin in your project easily type the following command in the terminal. Remember to swap the access token before starting the installation.
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/calendar
Setup plugin using schematics
ng add mdb-angular-calendar