Angular Bootstrap with Material Design PRO

An impressive collection of ready to use, stunning Material Design components.

Save huge amounts of time on website/application creation using our predefined sections and templates.

With the Premium Support all your issues will be treated as a priority and our team will make their fullest efforts to help you with any questions related to MDB.

An private GitLab account dedicated to MDB Pro users.

Table of Content

• Useful links
• PRO Technologies
• Quick Start
• Tutorials
• Documentation
• Supported Browsers
• Social Media

Useful links

• Preview - https://mdbootstrap.com/docs/angular/components/demo/
• ChangeLog - https://mdbootstrap.com/docs/angular/changelog/
• Documentation - https://mdbootstrap.com/docs/angular/
• Product page - https://mdbootstrap.com/products/angular-ui-kit/
• Support - https://mdbootstrap.com/support/
• FAQ - https://mdbootstrap.com/docs/angular/getting-started/faq/
• Tutorial - https://mdbootstrap.com/education/angular/

PRO technologies

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

Quick start

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

• Visit https://git.mdbootstrap.com/ and log in.

• 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/

• 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. : https://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 } from '@angular/core';

...

imports: [
    ...
    MDBBootstrapModulesPro.forRoot(),
    ...
],
providers: [
...
MDBSpinningPreloader,
...
]

Step 5

"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",
"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 @types/chart.js easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 @fortawesome/fontawesome-free 

OR

to package.json add:

"chart.js": "^2.5.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "screenfull": "3.3.0", "@fortawesome/fontawesome-free": "^5.6.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.

Tutorials

• Written Tutorial

• Video Tutorial

Documentation

• Huge, detailed documentation available online

Supported browsers

MDBootstrap supports the latest, stable releases of all major browsers and platforms.

Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, MDBootstrap should (in most cases) display and function correctly in these browsers as well.

Mobile devices

Generally speaking, MDBootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

	Chrome	Firefox	Safari	Android Browser & WebView	Miscrosoft Edge
Android	Supported	Supported	N/A	Android v5.0+ supported	Supported
iOS	Supported	Supported	Supported	N/A	Supported
⠀ Windows 10 Mobile⠀	N/A	N/A	N/A	N/A	Supported

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

	Chrome	Firefox	Internet Explorer	Edge	Opera	Safari
⠀Mac⠀	⠀Supported⠀	⠀Supported⠀	⠀N/A⠀	⠀N/⠀	⠀Supported⠀	⠀Supported⠀
Windows	⠀Supported⠀	⠀Supported⠀	⠀N/A⠀	⠀Supported	⠀Supported⠀	⠀Not supported⠀

Support MDB developers

• Star our GitHub repo
• Create pull requests, submit bugs, suggest new features or documentation updates
• Follow us on Twitter
• Like our page on Facebook

A big ❤️ thank you to all our users ❤️ who are working with us to improve the software. We wouldn't be where we are without you.

Social Media

• YouTube

• Twitter

• Facebook

• Pinterest

• Dribbble

• LinkedIn