MDB 5 Angular Pro plugins installation guide

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.

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.

        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:

        @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