/Angular-Bootstrap-with-Material-Design

Angular Bootstrap with Material Design - Powerful and free UI KIT

Primary LanguageTypeScriptOtherNOASSERTION

Angular Bootstrap with Material Design

Built with Angular 7, 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.

Downloads License npm

logo


Table of Contents

Other Technologies

Demo

Main demo

Version

  • Angular 7
  • Angular CLI 7

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.

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 set defaults.styleExt scss

  • add below lines to angular.json:

"styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.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.

Chrome
Chrome
Firefox
Firefox
Safari
Safari
Android Browser & WebView IE / Edge
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
Chrome
Firefox
Firefox
IE / Edge
Internet Explorer
Internet Explorer / Edge
Edge
Opera
Opera
Safari
Safari
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported N/A Supported Supported Not supported

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Getting started

5min Quick Start

Additional tutorials

MDB - Bootstrap tutorial

MDB - Wordpress tutorial

PRO version

Angular Bootstrap with Material Design PRO

Documentation

Huge, detailed documentation avilable online

Highlights

Bootstrap 4
Up-to-date with the latest standards of Bootstrap 4 and all the best it has to offer.

Angular CLI
A command line interface handling all the tedious tasks for you out of the box.

Detailed documentation
Intuitive and user-friendly documentation, created with a copy-paste approach.

No jQuery
Writing you code with pure Angular is now quicker, easier, and cleaner.

TypeScript
Superset of JavaScript that compiles to clean JavaScript output.

Angular 7
Create smarter and faster Angular apps with the latest official Angular release.

Cross-browser compatibility
Works perfectly with Chrome, Firefox, IE, Safari, Opera and Microsoft Edge.

Frequent updates
Expect any bugs being fixed in a matter of days.

Active community
MDB is broadly used by professionals on multiple levels, who are ready to aid you.

Modularity
Use TypeScript modules to compile package adjusted yo your needs.

Useful helpers
Reduce the frequency of highly repetitive declarations in your CSS.

Technical support
Every day we help our users with their issues and problems.

SASS files
Thought-out .scss files come in a compile-ready form.

Flexbox
Full support of Flexbox layout system lets you forget about alignment issues.

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.

Useful Links

Getting started

5 min quick start

Material Design + Bootstrap Tutorial

Material Design + WordPress Tutorial

Freebies

Premium Templates

Changelog

MDB jQuery repo

MDB React repo

MDB Vue repo

Social Media

Twitter

Facebook

Pinterest

Google+

Dribbble

LinkedIn

Contact

contact@mdbootstrap.com