Angular Bootstrap with Material Design

Built with Angular 8, Bootstrap 4 and TypeScript. CLI version available. Absolutely no jQuery.

400+ material UI elements, 600+ material icons, 74 CSS animations, TypeScript modules, SASS files and many more.

All fully responsive. All compatible with different browsers.

Other Technologies

Demo

Main demo

Version

Angular 8
Angular CLI 8

Quick start

Clone following repo:

git clone https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design.git .

note "." at the end. It will clone files directly into current folder.

Run npm i
Run npm start
Voilà! Open browser and visit http://localhost:4200

Now you can navigate to our documentation, pick any component and place within your project.

Demo application

Feel free to check our live example components: Just type ng serve mdb-demo in terminal!

Type one of the below commands to remove demo application from this project:

npm run remove-demo-unix to remove demo application on UNIX based systems,
npm run remove-demo-windows to remove demo application on Windows systems.

Available commands

npm run build:lib - building library,
npm run pack - copying assets and packaging /dist directory into .tgz archive
npm run version - adjusting src/package.json version from main package.json file,
npm run compile - Executing above commands with correct sequence.

Modules list

ButtonsModule,
CarouselModule,
ChartsModule,
CollapseModule,
InputsModule,
ModalModule,
NavbarModule,
PopoverModule,
TooltipModule,
WavesModule,
MDBBootstrapModule - contains every MDB modules.

How to install MDB via npm

create new project ng new project_name --style=scss
npm i angular-bootstrap-md --save
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 ]
});

in angular.json change:

"styleExt": "css" to "styleExt": "scss"

rename /src/styles.css to styles.scss

if you want to change styles in exisiting project you can use ng config schematics.@schematics/angular:component.styleext scss
add below lines to angular.json:

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

install external libs

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

Run server

ng serve --open

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.