Manual installation (zip package)
Step 1
Download the package
MDB ANGULAR UI KIT downloadStep 2
Unzip downloaded package and open it in the code editor
Step 3
Install dependencies
npm install
Step 4
Run the 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!
Don't miss MDB Angular updates! Join our mailing list & receive information whenever a new update is released.
By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Policy
MDB CLI
CLI installation is the most efficient way to use MDB. It enables options such as:
- Free hosting (supports custom domains, SSL, FTP access)
-
Install any MDB
package with a single command
- Easy updates with a single command
- Backend starter templates (Laravel, plain PHP, node.js & more)
- WordPress setup in 3 minutes (blog, ecommerce or blank project)
- Git repository for you and your team
Advanced installation
Prerequisites
Before starting the project make sure to install Angular CLI (v16) and Node LTS (v16 or v18).
Step 1
Create a new Angular app. Choose SCSS stylesheet.
ng new my-app
Step 2
Navigate to app's directory
cd my-app
MDB installation
Step 1
Setup MDB
ng add mdb-angular-ui-kit
- decide whether to set up Roboto font
- decide whether to set up Font Awesome 6
- decide whether to set up browser animations
Step 2
Launch your app
ng serve -o
NPM
Prerequisites
Before starting the project make sure to install Angular CLI (v16) and Node LTS (v16 or v18).
Installation
To install MDB ANGULAR UI KIT in your project easily type the following command in the terminal:
npm i mdb-angular-ui-kit
Module import
Add imports of individual MDB modules to the app.module.ts to
use specific components. For example to use checkbox:
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
…
@NgModule ({
...
imports: [MdbCheckboxModule],
...
})
CSS import
Add MDB styles import to the styles.scss file:
The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later).
// MDB SCSS
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
Font Awesome
Install Font Awesome:
npm i @fortawesome/fontawesome-free
Add Font Awesome styles to the styles.scss file:
The tilde imports were deprecated in v3.0.0, please remove the ~ if you use this version (or later).
// Font Awesome
@import '@fortawesome/fontawesome-free/css/all.css';
// MDB SCSS
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
Roboto font
Add the following line in public/index.html file inside
head section:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />