web
mobile

Installation guide

5 min Quick Start


Prerequisites:

  • Node.js: https://nodejs.org/en/
  • Angular CLI: npm install -g @angular/cli
  • Git - required in npm installation of MDB Angular Pro package

Manual installation (zip package)

Step 1: Download MDB Angular Free or MDB Angular Pro package

Step 2: Unzip downloaded package and open it in the code editor.

Step 3: Install dependencies. Depending on your node module manager, run:


        $ npm install
      

        $ yarn
      

Step 4: Run your 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!


NPM installation

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: Open the project in the code editor

Step 3: Install MDB Angular Free:

npm install angular-bootstrap-md --save

Step 4: Update the app.module.ts file with the following code:

          
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ]
});
          
        

Step 5: Update styles and scripts arrays in angular.json file:


"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

Step 6: Install external libraries

npm install -–save chart.js@2.5.0 @types/chart.js @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

Step 7: Run application

ng serve --o

Step 1: Create new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: Open the project in the code editor

Step 3: Generate new GitLab token (see token generation section)

Step 4: Use generated token to install MDB Angular Pro package

npm install git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git --save

Step 5: Update the app.module.ts file with the following code:


import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { NgModule } from '@angular/core';
...
imports: [ ... MDBBootstrapModulesPro.forRoot(), ... ], providers: [ ... MDBSpinningPreloader, ... ]

Step 6: Update styles and scripts arrays in angular.json file:


"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
"node_modules/animate.css/animate.css",
"src/styles.scss"
],
and scripts

"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/screenfull/dist/screenfull.js",
"node_modules/hammerjs/hammer.min.js"
],

Step 7: Install external libraries

npm i --save chart.js@2.5.0 @types/chart.js easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free animate.css

Step 8: If you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports AgmCoreModule.forRoot({ apiKey: 'Your_api_key' })

Step 9: Run application:

ng serve -o

Token generation

Step 1:  Visit https://git.mdbootstrap.com and log in. If you are PRO user and do not have an account yet, please request one contacting us: contact@mdbootstrap.com

Step 2:  From top right corner click at your avatar and choose "Setting → Access Tokens"

Step 3:  Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
add token


Step 4:  Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose, you will have to generate new token again.
token


Angular Schematics installation (ng add)

From MDB Angular 6.3.0 there's possibility to install MDB Angular Free by using ng add command.

Step 1: Create new project: ng new your-project-name

Step 2: Add MDB Angular Free configuration: ng add angular-bootstrap-md


Snapshot builds (developer versions)

It's possible to download snapshot build (developer version).

MDB Angular Free:

git clone -b dev https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design

MDB Angular Pro:

npm install git+https://oauth2:<your-auth-token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#dev --save

Please note that the developer version is the one we are working on when writing patches. This version is not stable and can cause problems in your project.