Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

  • By MDBootstrap
  • Last update: Dec 1, 2022
  • Comments: 12

MDB Logo

MDB 5 Angular

Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT

>> Get Started in 4 steps

>> MDBAngular 5 Demo

Downloads License YouTube Video Views



  • 500+ material UI components
  • Super simple, 1 minute installation
  • Detailed docs & multiple practical examples
  • Angular 11
  • Huge and active community
  • MIT license - free for personal & commercial use

Trusted by 2 000 000+ developers & designers. Used by companies like


Tutorial for the latest Bootstrap v.5 Alpha. In this video we'll learn about the changes implemented into v.5.

>> Click here for a written tutorial

Start to Code

Learn Bootstrap 5 | Crash Course for Beginners in 1.5H


Demo

Simplicity and ease of use are key features of MDB 5 Angular UI Kit. You need only one minute to install and run it.

Buttons

Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Spinners

Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Footer

A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Hover

MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.

Notes

Notes are small components very helpful in inserting an additional piece of information.

and more.

Github

https://github.com/mdbootstrap/mdb-angular-ui-kit

Comments(12)

  • 1

    Please update your docs

    The docs are so outdated. Nothing works properly. The from the website example don't work for the navbar. This is a nightmare. When you do NPM install there is no IMG, FONT files. Your NPM package needs updated with all the correct files needed to use from the node_module directory. Why you have to bring your scss files and typscripts files over beats me. Then you have to download the example file to get the rest of the files over for the IMG and FONT directories. Then it's a puzzle to find out to do a simple nav bar because your examples WON'T WORK!

    So I was 2 seconds away from purchasing, and now I refuse to because of this.

  • 2

    Webpack failed to compile

    ERROR in ./node_modules/angular-bootstrap-md/index.ts
    Module build failed: Error: <PROJECT_PATH>/node_modules/angular-bootstrap-md/index.ts is not part of the compilation output. Please check the other error messages for details.
        at AngularCompilerPlugin.getCompiledFile (<PROJECT_PATH>/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:629:23)
        at plugin.done.then (<PROJECT_PATH>/node_modules/@ngtools/webpack/src/loader.js:467:39)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
     @ ./src/app/modules/shared/shared.module.ts 10:0-58
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
    

    Using Angular CLI 1.5.0 and Angular 5.0.0

  • 3

    Navbar(mobile) does not close on click

    I just updated to the latest version of mdbootstrap and expected this to be fixed. Viewing on mobile, clicking a link within a navbar or clicking outside of navbar does not close said navbar. Is it just me or is this still a standing issue?

    Repro: 1.)

    <!--Navbar-->
    <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
               
        <!-- Navbar brand -->
        <logo><a class="navbar-brand" href="#">Navbar</a></logo>
    
        <!-- Collapsible content -->
        <links>
    
            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link waves-light" mdbRippleRadius>Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link waves-light" mdbRippleRadius>Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link waves-light" mdbRippleRadius>Pricing</a>
                </li>
    
                <!-- Dropdown -->
                <li class="nav-item dropdown" dropdown>
                    <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
                    Basic dropdown<span class="caret"></span></a>
                    <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                        <a class="dropdown-item waves-light" mdbRippleRadius href="#">Action</a>
                        <a class="dropdown-item waves-light" mdbRippleRadius href="#">Another action</a>
                        <a class="dropdown-item waves-light" mdbRippleRadius href="#">Something else here</a>
                        <div class="divider dropdown-divider"></div>
                        <a class="dropdown-item waves-light" mdbRippleRadius href="#">Separated link</a>
                    </div>
                </li>
    
            </ul>
            <!-- Links -->
    
            <!-- Search form -->
            <form class="form-inline  waves-light" mdbRippleRadius>
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
            </form>
        </links>
        <!-- Collapsible content -->
    
    </mdb-navbar>
    <!--/.Navbar-->
    

    2.) View on mobile.

    P.S - This does not work on your Angular docs either.

    Thanks, Brad

  • 4

    Modal not working

    I added this code to my angular 5 template file, but nothing happens each time i click the button, i have no idea whats wrong here,navbar and other components are working fine ``

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
     Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    
  • 5

    Has no exported member 'Subscription'

    Expected behavior

    Run ng serve successfully.

    Actual behavior

    I'm getting an error with a module.

    Your working environment and MDB version information

    Angular: 6.0.1 angular-bootstrap-md: 6.0.2 Bootstrap: 4.1.1 Angular CLI: 6.0.1 Node: 10.0.0 NPM: 6.0.1 OS: linux x64 rxjs: 6.1.0 typescript: 2.7.2 webpack: 4.3.0

    Resources (screenshots, code snippets etc.)

    screenshot from 2018-05-11 23-09-01

    ERROR in node_modules/angular-bootstrap-md/dropdown/dropdown-toggle.directive.ts(2,10): error TS2305: Module '"/my-path/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
    node_modules/angular-bootstrap-md/dropdown/dropdown.directive.ts(3,12): error TS2305: Module '"/my-path/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
    node_modules/angular-bootstrap-md/dropdown/dropdown.directive.ts(158,9): error TS2339: Property 'filter' does not exist on type 'EventEmitter<boolean>'.
    
    

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 6

    Cannot find module '@angular/core/src/metadata/lifecycle_hooks

    I am using MD Boostrap with Angular 8. As soon as I ran ng server. It started throwing below error.
    Note: I am not using Pro version.

    ERROR in node_modules/angular-bootstrap-md/lib/navbars/links.component.d.ts(3,31): error TS2307: Cannot find module '@angular/core/src/metadata/lifecycle_hooks'. node_modules/angular-bootstrap-md/lib/navbars/navlinks.component.d.ts(3,31): error TS2307: Cannot find module '@angular/core/src/metadata/lifecycle_hooks'.

  • 7

    Error importing SCSS file

    Expected behavior

    Import to work

    Actual behavior

    I'm importing the scss file for mdbootstrap_angular in my styles.scss file. The actual stmt used is @import "~angular-bootstrap-md/scss/mdb-free";

    I'm getting an error in the _forms.scss file

    Your working environment and MDB version information

    I'm using stackblitz and version 6.0.2 of angular-bootstrap-md

    Resources (screenshots, code snippets etc.)

    The actual received is as follows

    Error in angular-bootstrap-md/scss/free/_forms.scss (5:3) property "input" must be followed by a ':'

    When I looked up this file in your repository at https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/ this is what I see in this file (and indeed on line 5 you have input[type=text] ).

    // Forms basic // Input + label wrapper styles .md-form { // Text inputs input[type=text], input[type=password], input[type=email], input[type=url], ...

    So is the syntax above correct for an scss file. Am I missing some helper function that may be embedded out of order.

    This is what I have in my index.html file link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    Add bootstrap social library for social media icons --> link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" rel="stylesheet">

    Add font awesome icon library --> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    A workaround could be if I included the styles for mdbootstrap-angular directly in my index.html as references. But I can seem to find a .css file for angular-bootstrap-md at the 6.2.0 level. I tried this approach using the link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet" but it doesn't appear to be the correct level. In particular the dropdown button in the toolbar does not work (which I reported in a different issue which has been closed).

    Thanks and regards.

    For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 8

    Fluid modal long content overflow issue

    Hello and thanks for the work,

    From screenshot you can see header and footer are not contained in the modal in case of modal-fluid. This is from the docs capture d ecran 2018-01-15 a 16 19 37

  • 9

    Bump mixin-deep from 1.3.1 to 1.3.2 in /projects/schematics

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 10

    Can't resolve 'chart.js'

    Expected behavior

    Actual behavior

    Got Error after Installing angular-bootstrap-md Module not found: Error: Can't resolve 'chart.js'

    Your working environment and MDB version information

    I Installed "angular-bootstrap-md": "^6.2.4", and got error while running application My angular version

    Angular CLI: 6.2.3
    Node: 8.11.1
    OS: win32 x64
    Angular: 6.1.9
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router
    

    Resources (screenshots, code snippets etc.)

    ERROR in ./node_modules/angular-bootstrap-md/esm5/angular-bootstrap-md.es5.js
    Module not found: Error: Can't resolve 'chart.js'
    

    alt text For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

  • 11

    Error when importing from node_modules in my styles.scss

    Hi,

    I am working on an angular 4 projet. I am trying to import from node_modules mdb.scss in order to override default variable. My styles.scss is aat the root of the project asin angular-cli new project.

    Here is my styles.scss

    /* You can add global styles to this file, and also import other style files */
    $primary: red;
    $font-family-base: "Comic Sans MS", cursive, sans-serif;
    @import "~mdbootstrap/sass/mdb";
    

    Here is one of the error :

    ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/li
                                                                                                                                                                             b/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
                                                                                                                                                                                                                                             Module not found: Error: Can't resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
    resolve '../font/roboto/Roboto-Thin.woff2' in 'C:\Users\myusername\Desktop\PROJECT-NAME\src'
      using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
        Field 'browser' doesn't contain a valid alias configuration
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            after using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./src)
    using description file: C:\Users\myusername\Desktop\PROJECT-NAME\package.json (relative path: ./font/roboto/Roboto-Thin.woff2)
    no extension
    Field 'browser' doesn't contain a valid alias configuration
            C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
                                                                                                              .ts
                                                                                                              Field 'browser' doesn't contain a valid alias configuration
            C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts doesn't exist
                                                                                                                                                                                                                           .js
                                                                                                                                                                                                                           Field 'browser' doesn't contain a valid alias configuration
            C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js doesn't exist
                                                                                                                                                                                                                                                                                                                                        as directory
                                                                                                                                                                                                                                                                                                                                        C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2 doesn't exist
    [C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]
    [C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.ts]
    [C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2.js]
    [C:\Users\myusername\Desktop\PROJECT-NAME\font\roboto\Roboto-Thin.woff2]
    

    I have serveral error like this which are all about wrong path.

    Expected behavior

    I d like to import and override variables as I would do in any bootstrap4 (the scss) project.

    Way to reproduce

    with angular cli :

    1. create a new project with angular cli
    2. install mdb as a dep
    3. add scss as a style extension
    4. import it and try to override variables in styles.scss
  • 12

    Accordion - Incorrect triggering of Events: itemShown, itemHidden