Version:

Angular 6+

Angular CLI 6+


Prerequisites:

Both the CLI and generated project have dependencies that require Node 8.x or higher, together with NPM 5 or higher. (Nodejs)

You will need to do two more things:

Step 1:  npm i -g @angular/cli

Step 2:  npm i -g typescript

Now everything should work fine

We also suggest to install typescript plugin for your editor to have nice and neat syntax highlight

Manual installation:

Step 1: If you haven't downloaded MDB Angular package yet, go to Getting Started page and download it now.

Step 2: Unzip downloaded package and open bash on your unpacked folder.


Now you must write a few lines to make it work and first of them is npm i

Reason for this npm command is to download every needed module to node_modules.

Step 3: Now after you've downloaded everything it's time to write second command which let us serve our app on localhost ng serve -0


Step 4: When you check what is served at your port 4200 you should see app default screen.

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:

If you encounter problems installing the latest version, please refer to our migration guide. Migration Guide

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

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

Step 2:  cd your-angular-project

Step 3:  GitHub npm install

npm i angular-bootstrap-md --save

Step 4: to app.module.ts add


import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
});

Step 5: Make sure that styleExt is set to "scss" in angular.json file, if not change:

"schematics": {
    "@schematics/angular:component": {
      "styleext": "css"
    }
  }
to
"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }


Step 6: Make sure you have src/styles.scss. If you have src/styles.css instead, rename it to .scss.

if you want to change styles in existing project you can use ng set defaults.styleExt scss

Step 7: add below lines to angular.json:


"styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

Step 8: install external libs

npm install -–save chart.js@2.5.0 font-awesome hammerjs

Step 9: Run server

ng serve --o

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file
from
"node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss
to
"node_modules/bootstrap/scss/bootstrap.scss.

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

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

Step 2:  cd your-angular-project

Step 3:  GitLab npm install

  1. Visit  https://git.mdbootstrap.com  and log in.
  2. From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to:  https://git.mdbootstrap.com/profile/personal_access_tokens
  3. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token" 
  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
  5. Navigate to given repository, switch GIT to HTTP and copy it's url i.e. :  http://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git
  6. Adjust following link as per below: 
    "git+https://oauth2: + access _token + @ + repo address" 

    i.e. 

    git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git
  7. Within existing npm project run: 
    npm install git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git --save

    if you don't have existing npm project you should crate it first (npm init)

    alternatively you can update your dependencies in package.json like below : 

     "dependencies": {
       "ng-uikit-pro-standard": "git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git"
      }


    and run npm install 


Step 4:  add following imports and providers to your app.module.ts:


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

Step 5: Into your angular.json file   add styles


"styles": [
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", 
"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 6: Install 3rd party libraries using 
npm i --save chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome

OR
to package.json add:

"chart.js": "^2.5.0",
"easy-pie-chart": "^2.1.7",
"hammerjs": "^2.0.8",
"screenfull": "3.3.0",
"font-awesome": "^4.7.0"
and then use npm i

Step 7: 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 8: ng serve -o

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file
from
"node_modules/ng-mdb-pro/scss/bootstrap/bootstrap.scss
to
"node_modules/bootstrap/scss/bootstrap.scss.

Requirements:

  • .Net Core 2.x SDK
  • Node.js
  • Angular/Cli

Info:

In case you have existing ASP.Net Core Angular application, you can skip steps 1-17 and start from Step 18.

Step 1:  Create new angular project using Angular CLI command:, and change directory to your's project with cd command

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

cd your-angular-project

Step 2:  Create ASP.Net Core Web API project using dotnet new your-api-name command:

dotnet new api

Step 3:  Open your's project in Visual Studio Code or other editor

Step 4:  Build and run your's project using ng build and dotnet run

Step 5:  Open browser on http://localhost:5000/api/values. Be sure to add /api/values to the URL, because that's the default route for the newly created Web API

Step 6:  Open .angular-cli.json file, and change line "outDir": "dist" to "outDir": "wwwroot"

Step 7:  Delete ValueController.cs file located in Controllers directory.

Step 8:  On the same directory create new file called HelloController.cs, and paste there below code:


using System;
using Microsoft.AspNetCore.Mvc;

namespace hello_world
{
    [Route("api/[Controller]")]
    public class HelloController : Controller
    {
        [HttpGet]
        public IActionResult Greetings() {
            return Ok("Hello from ASP.NET Core Web API.");
        }
    }
}

Step 9:  Modify Startup.cs file by adding below code just above app.UseMvc();


app.UseDefaultFiles();
app.UseStaticFiles();
    

Step 10:  On src/app directory create new file called app.service.ts and fill it with code from below:


import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppService {
    private greetUrl = 'api/Hello';

    // Resolve HTTP using the constructor
    constructor(private _http: Http) { }

    sayHello(): Observable<any> {
        return this._http.get(this.greetUrl).map((response: Response) => {
            return response.text();
        });
    }
}
    

Step 11:  Modify file app.module.ts located in src/app directory by importing HttpModule and AppService, and using AppService as providers


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppService } from './app.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Step 12:  Modify app.component.ts file to inject AppService


import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  greetings = '';

  constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.sayHello()
      .subscribe(
      result => {
        this.greetings = result;
      }
      );
  }
}
    

Step 13:  Modify app.component.html file to show our greetings


<h2 class='panel-heading'>
    {{greetings}}
</h2>
<hr/>
    

Step 14:  Build Angular using ng build command

Step 15:  Build DotNet using dotnet build command

Step 16:  Run DotNet using dotnet run command

Step 17:  Open your's browser on localhost:5000 and test your's application!

Step 18:  GitHub npm install

npm install --save angular-bootstrap-md chart.js@2.5.0 font-awesome hammerjs

Step 19: to app.module.ts add


import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
    imports: [
        MDBBootstrapModule.forRoot()
    ],
    schemas: [ NO_ERRORS_SCHEMA ]
});

Step 20: Make sure that styleExt is set to "scss" in angular.json file, if not change:

"schematics": {
    "@schematics/angular:component": {
      "styleext": "css"
    }
  }
to
"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }


Step 21: Make sure you have src/styles.scss. If you have src/styles.css instead, rename it to .scss.

if you want to change styles in existing project you can use ng set defaults.styleExt scss

Step 22: add below lines to angular-cli.json:


"styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],
"scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
],

Step 23:  Build Angular using ng build command

Step 24:  Build DotNet using dotnet build command

Step 25:  Run DotNet using dotnet run command

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file
from
"node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss
to
"node_modules/bootstrap/scss/bootstrap.scss.

Requirements:

.Net Core 2.x SDK,

Node.js,

angular/cli

Info:

In case you have existing ASP.Net Core Angular application, you can skip steps 1-17 and start from Step 18.

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

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

Step 2:  Create ASP.Net Core Web API project using dotnet new your-api-name command:

dotnet new api

Step 3:  Open your's project in Visual Studio Code or other editor

Step 4:  Build and run your's project using ng build and dotnet run

Step 5:  Open browser on http://localhost:5000/api/values. Be sure to add /api/values to the URL, because that's the default route for the newly created Web API

Step 6:  Open .angular-cli.json file, and change line "outDir": "dist" to "outDir": "wwwroot"

Step 7:  Delete ValueController.cs file located in Controllers directory.

Step 8:  On the same directory create new file called HelloController.cs, and paste there below code:


using System;
using Microsoft.AspNetCore.Mvc;

namespace hello_world
{
    [Route("api/[Controller]")]
    public class HelloController : Controller
    {
        [HttpGet]
        public IActionResult Greetings() {
            return Ok("Hello from ASP.NET Core Web API.");
        }
    }
}

Step 9:  Modify Startup.cs file by adding below code just above app.UseMvc();


app.UseDefaultFiles();
app.UseStaticFiles();
    

Step 10:  On src/app directory create new file called app.service.ts and fill it with code from below:


import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppService {
    private greetUrl = 'api/Hello';

    // Resolve HTTP using the constructor
    constructor(private _http: Http) { }

    sayHello(): Observable<any> {
        return this._http.get(this.greetUrl).map((response: Response) => {
            return response.text();
        });
    }
}
    

Step 11:  Modify file app.module.ts located in src/app directory by importing HttpModule and AppService, and using AppService as providers


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppService } from './app.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Step 12:  Modify app.component.ts file to inject AppService


import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  greetings = '';

  constructor(private _appService: AppService) { }

  ngOnInit(): void {
    this._appService.sayHello()
      .subscribe(
      result => {
        this.greetings = result;
      }
      );
  }
}
    

Step 13:  Modify app.component.html file to show our greetings


<h2 class='panel-heading'>
    {{greetings}}
</h2>
<hr/>
    

Step 14:  Build Angular using ng build command

Step 15:  Build DotNet using dotnet build command

Step 16:  Run DotNet using dotnet run command

Step 17:  Open your's browser on localhost:5000 and test your's application!

Step 18:  Obtaining MDB Pro Authentication Token

  1. Visit  https://git.mdbootstrap.com  and log in.
  2. From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to:  https://git.mdbootstrap.com/profile/personal_access_tokens
  3. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token" 
  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

Step 19:  Install both MDB Pro Package and 3rd party libraries perfoming:

npm install --save git+https://oauth2:<your-mdb-pro-auth-key>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome

For example:
npm install --save git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome

Step 20:  add following imports and providers to your app.module.ts:


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

Step 21: Into your angular.json file   add styles


"styles": [
"node_modules/font-awesome/scss/font-awesome.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss", 
"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 22: 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 23:  Build Angular using ng build command

Step 24:  Build DotNet using dotnet build command

Step 25:  Run DotNet using dotnet run command

NOTE:It is possible to install Bootstrap from npm package. Just type npm install bootstrap --save.

Using Bootstrap from npm requires to change location of bootstrap.scss file in angular.json file
from
"node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss
to
"node_modules/bootstrap/scss/bootstrap.scss.

Snapshot builds (developer versions):

There's always possibility to download snapshot build (developer versions). Those build are available to download from Github (MDB Angular Free) and from Gitlab (MDB Angular Pro).

Downloading snapshot build from GitHub: git clone -b dev https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design .

Downloading snapshot build from GitLab: 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 versions are the ones we are working on when writing patches. So there is a chance that this versions may cause problems in your project because it is not yet marked as stable.