Installation guide

Manual installation (zip package)

Step 1

Download the package

MDB ANGULAR UI KIT download

Step 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!

Note: Manual installation with a .zip package is the easiest way, but many useful features are not available there.
To use the full potential of MDB and all available options, we recommend installation through MDB CLI.

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 Bootstrap logo Angular logo React logo Vue logo JavaScript logo jQuery logo
    • 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
    Install MDB CLI

    Advanced installation

    Prerequisites

    Before starting the project make sure to install Angular CLI (11.x.x) and Node LTS (12.x.x or higher).

    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 5
    • 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 (11.x.x) and Node LTS (12.x.x or higher).

    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:

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

    
            // Font Awesome
            @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
            @import "~@fortawesome/fontawesome-free/scss/solid.scss";
            @import "~@fortawesome/fontawesome-free/scss/regular.scss";
            @import "~@fortawesome/fontawesome-free/scss/brands.scss";
    
            // 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" />