Installation guide

Basic 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.

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

Manual installation (zip package)

Step 1

download the package

MDB 5 download

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Run npm install command to install dependencies and ng serve -o command to open the application.

Step 4

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

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 MdbModule import to the app.module.ts file:


        import { MdbModule } from 'mdb-angular-ui-kit';
        …
        @NgModule ({
          ...
          imports: [MdbModule],
          ...
        })
      

CSS import

Add MDB styles import to the styles.scss file:


        // MDB SCSS
        @import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
      

Font Awesome

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