Sign in

Sign up

Angular Bootstrap 5.2.3

What's new?

Angular FAQ & Known issues

Due to fact that Angular 5.x and CLI 1.6.x are dynamically developed and minor issues occur we have created list of Frequently Asked Questions and/or issues with solutions/workarounds.


  • Compatibility with Angular Universal (Server-Side Rendering) Read tutorial.
  • Improved dropdown animation in Material Select
  • Fixed problem with dropdown transition in Material Select
  • "Not Found" message in Material Select will be visible only when filtering does not show results.
  • Fix for top / bottom arrow in Material Select
  • Added possibility to overwrite $image-path variable

  • Fix for npm distribution (only)

  • Enhanced mdbActive directive - works with data prefilled by browser
  • Sidenav issue fixed (skin is optional)
  • Fixed with rounded buttons inside input group
  • Fixed for dropdown not getting closed after click in other dropdown.
  • Fix for line breaking label in checkboxes

  • Updated to Bootstrap 4 stable version
  • Integration with .NET CORE - tutorial here
  • Compatibility with Angular 5.2.1 and CLI 1.6.5
  • noImplicitAny and strictNullChecks compatibility
  • New validation added (number, tel, submit) + custom validation regex. Read tutorial.
  • Configurable labels for DatePicker

  • Angular 5.2.1 and CLI 1.6.5 compatibility
  • Extended docs for modals - auto focus on input
  • Fixed validation for email and password
  • Aria attributes added to datepicker
  • Added filtering options to Material Select
  • Support for IE+ and Edge for Double Navigation
  • Extended DatePicker with new functionality:
  • Important!
    By default date picker will load now +- 7 years starting from current year. It can be overwritten using minYear and maxYear parameters:

    import { Component } from '@angular/core'; 
    import { IMyOptions } from 'your_path_to/date-picker/index'; 
        selector: 'date-picker-component-example', 
        templateUrl: 'toast.component.html' 
        export class DatePickerComponentExample { 
        public myDatePickerOptions: IMyOptions = { 
        minYear: 2015, 
        maxYear: 2017


  • Double navigation - support for collapsed sidenav and navbar
  • Extended documentation for Autocomplete
  • Auto resize function for collapse added
  • Mobile gestures carousel support added
  • Added option to hide next / prev buttons in carousel
  • Fix for: Module has no exported member 'MDBSpinningPreloader'
  • Automatically set date in DatePicker using ngModel
  • Fixed docs for File Upload

  • Angular 5.1.3 and CLI 1.6.3. compatibility
  • Fixed issue with exceeding text tabs component
  • Auto-close navbar after click into link (check documentation for more information)
  • Fixed problem with error/success message on Firefox
  • Fixed problems with selecting hour on mobile devices in Timepicker
  • Extended configuration options of easy pie charts (check documentation for more information)
  • Fixed for relative path in _skins.scss
  • Fixed issue with date picker for Firefox
  • Enhanced support for small screen resolution in Datepicker (<575 px)
  • Fix for issue while using multiple MDB Autocomplete components

  • Added compatibility with noUnusedLocals

  • 5.0.4

  • Added compatibility with noUnusedParameters

  • 5.0.3

  • Fixed missing arrow in popovers

  • 5.0.2

  • Fixed circular dependencies error.

  • 5.0.1

  • Fixed for imgPath in .scss

  • 5.0.0

    Version 5.0.0 brings brings compatibility with new Angular 5.0 and CLI 1.5. Except for that new update include Bootstrap 4 Beta 2 assets.

      What's new in Bootstrap 4 beta-2:

    1. Restored `.offset-*` classes
    2. Switched Breadcrumbs from `float` to Flexbox
    3. Dropped support for Bower

    Important information

    Although Angular 5.0.0 and CLI 1.5.0 are marked as stable releases, there are still quite a few open issues related to the released out of which some (i.e. this: #8284)have impact on MDB (as well as other plugins). Currently we are awaiting for Angular team to resolve that issue, meanwhile please use following workaround:

    add following into tsconfig.json file located in *root* folder

    "include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 

    (note: there is also file inside src folder, however if you want to use it, path should be different)

    "include": [ "**/*.ts", "../node_modules/angular-bootstrap-md/index.ts" ]

    Angular Bootstrap 4.3.7

    What's new?


    Version 4.3.7 brings few bugfixes and enhancements

    • Lightbox support for ESC key to close.
    • Enhanced chart documentation
    • Fix for sidenav resizing behaviour while changing the window size
    • Fixed issue "ERROR ReferenceError: event is not defined" for mdb-select
    • Added markers support to Google Maps
    • Fixed e-mail validation issue for input type="email"
    • Fixed issue with 24H time-picker not working
    • Fixed issue "ToastrModule is already loaded"
    • Since version 4.3.7 , Toast Service has to be imported separately as singleton to avoid circular dependencies.

      Import Toast Service as singleton:

      import { ToastModule } from ‘ng-mdb-pro/pro/alerts’;
      imports: [
      import {ToastService} from '../../typescripts/pro/alerts' 
      private toast: ToastService
      ) { }

      Sample usage:

      ngOnInit() {
          () =>"It works!")

    Fixed issue with webpack build (relative path to img/overlays)


    Fixed scss imports

    Updated How to install


    Npm install fix


    Scss files update


    Fixed production build.


    Template url fix for: carousel, dropdown, modalBackdrop, modalContainer, navbar, popover, tooltip.


    Version 4.3.0 brings plenty of important changes. We have updated every single component and directive.

    We've reviewed our code, and have fixed about 892 errors. Now, our product reached the new level of quality. We've raised our code quality to meet quality standards designed by Google's Angular team.

      Most important changes (backward compatibility dropped):

    1. Directives - camelCase and mdb prefix

    2. Components - kebab-case and mdb prefix

      Other changes (doesn't affext compatibility)

    1. Consistent indent of 2 spaces

    2. Use of hostBinding and hostListner instead of host property

    3. Private, public and instance both methods and variables has been sorted in files (recommended by Angular, it helps with readability)

    4. Each template has been moved to seperate file (except of one-liners)

    5. And many more tiny quality improvements ...

    Version Disclaimer

    This is major release, however to stay consistent with Angular's, and Bootstrap's versioning we decided to stay with 4 to omit any confuses in MDB Angular Community. Backwards compatibility has been completly dropped.

    Angular Bootstrap 4.2.0 Beta version

    What's new?


    That's the most significant update in the history of MDBootstrap. Together with the newest Bootstrap, we introduce you a brand new, completely rewritten MDB.

    We took a lot of effort to provide a backward compatibility with the previous versions. Nonetheless, some syntax changes are inevitable (mostly caused by Bootstrap changes).

    We've prepared a detailed list of syntax changes. The process of migration won't be painful, don't worry. However, we recommend you to read carefully a detailed list of changes. You can find it below.

    You can download the new version of MDB Free on our website and for MDB Pro from your account page.

    Note 1: For MDB Angular 4.2 beta we use an experimental version of Bootstrap 4 beta, not published yet. You can find a documentation for this Bootstrap version here.

    Note 2: If you wish you can still download a stable version of MDB Angular Free 4.1.0 here. Legacy documentation for MDB Angular 4.1.0 is available here.

    Note 3: If you are MDB Pro User and you whish to download MDB Pro 4.1.0 version write us on email: .

    Note 4: To provide a proper rendering of our website we recommend to clear the browser cache.

      Most important changes (backward compatibility provided):

    1. Improved design

    2. New, improved and extended documentation

    3. Completely rewritten, with the highest standards, SASS code

    4. Unified and simplified syntax

    5. Updated and improved JS plugins

      Other changes (backward compatibility provided) :

    1. Removed unused variables and classes

    2. Changed spacing utilities

    3. Updated colors (warning, danger, info, success)

    4. Customization made easier

    5. New contact form

    6. Recreated parallax

    7. Introduced gradients

    8. Dropped jumbotron for cascading card

    9. Improved cascading cards

    10. Added gradient cards

    11. Added enhanced bootstrap modals

    12. Updated overlay cards

    13. Improved pricings section

    14. Social list moved to deprecated

    15. Added border-radius to material dropdowns

    16. Improved design

    17. Updated accordion

    18. Added new versions of streaks

    19. Recreated intros

    20. Improved sidenav

    21. Fixed caret issue for material select

    22. Added animations to: tooltip, popover, alerts, dropdowns

    23. Fixed rotating card animation (from left to right side)

    24. Fixed input active class with dynamically added values

    25. Updated alerts module plugin

    26. Added slide animation for carousel

    27. Added mobile section

      Changes that can cause issues to project built with previous versions of MDB:

    1. .navbar-expand instead of .navbar-toggleable

    2. Removed nearly all .hidden-* classes in favor of our newer .d-* display utilities

    3. Renamed .btn-mdb to .btn-mdb-color for better naming scheme

    4. .btn-sm and .btn-lg instead of .btn-small and .btn-large for .btn-floating

      Coming soon:

    1. MDB Angular Admin Dashboard

    2. MDB React

    3. MDB Vue

    Beta Disclaimer

    It is up to you to take precaution against damages resulting from this beta software. Software in beta testing should for example not be used on sensitive and/or valuable data. The usage of beta software is at your own risk and may void the warranty on your products. If you are not an experienced user, or otherwise in any doubt of your capabilities to make such a decision, please user our stable release MDB 4.1.0. In no event the software provider shall be liable to you for any damages, including damages arising out of the use or inability to use the beta software.

    Angular Bootstrap 4.1.0

    What's new?

    4.1.0 version adds Sections and fixes few minor bugs.


    1. 10 Sections, which show what you can create with our angular components.

    2. Update of the documentation: more information about options and methods of components

    3. Removed from project and re-added as npm dependency google maps

    4. Fixed ripple effect issue

    5. Fixed mdbActive directive issue