MDB Angular Free

Download the latest version

Download Learn more
MDB Angular Pro

Download the latest version

Download Learn more
Newsletter

Would you like to be notified about next update ?

Subscribe to our newsletter

Angular FAQ & Known issues

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

MDB Angular 7.1.0

What's new?


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

We have rewritten the entire validation of forms. New validation is faster, lighter, better! Read about it below.

The mdbInputDirective directive has been divided into mdbInput and mdbValidate directives. Validation messages can ben now added with mdb-error and mdb-success components. More information on the usage can be found in validation documentation.

New validation offers more flexibility and solves problems with updateOn: 'blur' and updateOn: 'submit' options.

Those changes are backwards compatible. Directive mdbInputDirective will be still available for next few versions, but we recommend to use the new directives.

1. Fixes

  • Data Tables - pagination and search will now work without problems against data coming from Remote API,
  • Carousel with thumbnails - The problem with a larger thumbnails strip width than the slide photo in case of more slides has been solved,
  • Material Select - Filtering results with filterEnabled will now returns each line that contains the search character,
  • Date Picker - Significantly improved component performance. Solved an issue where Date Picker was rendered before it was needed,
  • Tooltip - A tooltip that does not fit in a free space along the top edge of the screen will be placed along the bottom edge, and vice versa,
  • Tooltip - Added input customHeight which supports the above effect, but in case the height of the tooltip has been changed,
  • Tabs - The problem in which static tabs were rendered before those with *ngIf was solved. It is required to use a new input tabOrder. Read more about this here,
  • Scroll Spy - Fixed problem with handling nested links,
  • Modals - Solved problem with built-in modal service. Now it is possible to call modals from this service.

2. Documentation

  • Data Tables - added new example how to use Data Tables with data from remote API,
  • Tabs - added new example how to use both static & dynamic tabs,
  • Tabs - added new tabOrder input,
  • Tooltips - added new example how to modify the Tooltip height,
  • Tooltips - added new customHeight input,
  • Modals - added examples how to use built-in modal's service.

MDB Angular 7.0.0

What's new?


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

Angular 7 version is now supported in MDB Angular

1. Fixes

  • Date picker - resolved problem with disabled state added in reactive forms
  • Date picker - resolved problem with typing the date in the input field
  • Date picker - changed z-index styles to fix the problem that caused other elements to overlap the component
  • Time picker - changed z-index styles to fix the problem that caused other elements to overlap the component
  • Accordion - resolved problem with 'Cannot read property expandAnimationState of undefined'
  • MdbInputDirective - resolved problem with displaying error and success messages when errorMessage and successMessage inputs values are empty strings.
  • File Upload - resolved problem with 'Cannot read property unsubscribe of undefined'

2. New features

  • Date picker - added new [tabIndex] input that allow to set tabindex of the date picker input field
  • Time picker - added new [tabIndex] input that allow to set tabindex of the time picker input field
  • Tabs - added new [disableWaves] input that allow to disable waves effect on the tabs buttons

MDB Angular 6.3.0

What's new?


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

The key "defaultProject" has been added to angular.json files of all packages containing the demo application. Thanks to that you can restart the application using the ng serve command.

In this update, support for the ng add function has been added to the MDB Angular Free product in the npmjs repository - angular-bootstrap-md. Thanks to that it is possible to install MDB Angular Free with one command ng add angular-bootstrap-md.

We have changed the structure of the .zip ng-uikit-pro-standard. In package.json file there is dependency ng-uikit-pro-standard indicating the file for local installation. If you want to install our MDB Angular Pro from GitLab servers, replace this path with a key starting with "//", which you will find in the same file (remember to replace text REPLACE_WITH_YOUR_TOKEN with your own personal token).

1. Fixes

  • Select - resolved problem with placeholder when value is null
  • Select - resolved problems with label styling. For the label to work correctly, we encourage you to add it via [label] input instead of HTML <label> tag.
  • Select - resolved problem with opening dropdown inside mdb-collapse component
  • Multiselect - added new styles to resolve problem with broken layout when many options are selected
  • Autocomplete - resolved problem with label position on input blur
  • Date Picker - resolved problems with component performance
  • Cards - resolved problem with adding shadow classes
  • Card Reveal - resolved problem with card height
  • Resolved problems with dependency vulnerabilities in MDB Free and MDB Pro

2. New features

3. Documentation

  • File input - added instructions on how to upload file to server
  • Sidenav - added instructions on how to use RouterLinkActive on mdb-side-nav links

4. Improved documentation

Added a new documentation format for all pages in following sections:

  • Layout
  • Utilities
  • Content
  • CSS
  • Components
  • Forms

5. Syntax change

Changed syntax in the following components:

  • Timeline - added one new class .timeline-basic and added .timeline class to each version of timeline

MDB Angular 6.2.6

What's new?

See the details below. All the changes are backward compatible.


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

1. Fixes

  • Resolved problem with ngIf directive used on mdb-tab
  • Resolved problem with active on disabled mdb-tab
  • Resolved problem with display of slider range cloud in Safari browser
  • Resolved problem with usage of routerLinkActive in mdb-sidenav. Sidenav should now highlight active item and toggle accordion item depending on the active route.
  • Resolved problem with display of mega menu when it is used together with mdb-sidenav component
  • Resolved problem with mdb-sidenav mask
  • Resolved problem with 'Attempt to use a destroyed view' in scroll-spy
  • Resolved problem with 'ExpressionChangedAfterItHasBeenCheckedError' in mdb-select filter input
  • Removed unnecessary padding from mdb-select component

2. New features

  • Added possibility to use icons in option list of mdb-autocomplete component
  • Added focus animation to mdb-autocomplete clear button and new [clearButtonTabIndex] input which allow to change tabindex attribute of this button

3. Documentation

  • Date picker - updated options object in example code
  • Tabs - added new instructions on how to set active tab programatically
  • Gradients - added examples for additional gradients
  • Skins - added instructions on how to add custom skin
  • Select - resolved problems with overlapped label with select element
  • Timeline - scss code is now in MDB Angular Pro package
  • FAQ - removed old and unnecessary questions and added new one

4. Syntax changes

Following outputs names has been changed:

Modal:

  • (onShow) is now (open)
  • (onShown) is now (opened)
  • (onHide) is now (close)
  • (onHidden) is now (closed)

Dropdown:

  • (onShown) is now (shown)
  • (onHidden) is now (hidden)

Popover:

  • (onShown) is now (shown)
  • (onHidden) is now (hidden)

Tooltip:

  • (onShown) is now (shown)
  • (onHidden) is now (hidden)

These syntax changes are backward compatible, which means that your project will work with both the old and the new syntax.

We recommend that you update the syntax as soon as possible. The changes will be backward compatible for several more versions.

MDB Angular 6.2.5

What's new?

See the details below. All the changes are backward compatible.


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

Added two demo applications to ready-to-use archives containing MDB Angular Free and MDB Angular Pro, and to the Angular Bootstrap with Material Design repository on Github.

1. Fixes

  • Resolved problem with mdb-select animation. Option list will appear above the component if there is not enough space below
  • Fixed bug which caused problems with opening mdb-select dropdown
  • Resolved problem with mdb-autocomplete events (keyup, keydown) which were emitted twice on each entry in the input element
  • Resolved problem with mdb-side-nav on Firefox
  • Resolved problem with hidden and fixed double navigation on IE11
  • Resolved problem with double navbar in Admin Dashboard Pro

2. New features

  • Added new directives which can be used to format credit card number, cvv number and date automatically
  • Tables - added new TableModule containing following elements:

    MdbTableDirective - responsible for different table types, for example: striped, responsive, hover, bordered, borderless

    MdbTableRowDirective - can be used to emit events after creating/removing table row

    MdbTableScrollDirective - responsible for table scroll along the x/y axis

    MdbTableSortDirective - responsible for sorting items in the table

    MdbTablePagination - component responsible for table pagination

    MdbTableService - service responsible for creating new rows, table search and table data source

  • Time picker - added [disabled]> input which allow to specify disabled state for the component input
  • Select - added new visibleOptions and tabindex inputs. Those inputs can be used to change number of options visible in the options list and tabindex of the component
  • Added new BadgeModule module containing the MDBBadgeComponent

3. Documentation

  • Editable table - resolved problem with moving cursor in edit mode
  • Maps - added new example how to use Info Window in Google Maps

4. Syntax changes

  • Color - replaced .default-text, .primary-text, .secondary-text, .success-text, .danger-text, .warning-text, .info-text classes with Bootstrap ones: .text-default, .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info

5. Deprecated

These settings will be stored only by one version yet:

  • .default-text, .primary-text, .secondary-text, .success-text, .danger-text, .warning-text, .info-text classes

We removed these classes from the package:

  • .full-bg-img
  • .full-height
  • .side-nav .double-navbar .bc-min
  • .no-padding
  • .ql-modal, .product-panel
  • .no-radius
  • .section-blog-fw
  • .personal-sm
  • .classic-tabs (previous syntax not classic tabs at all)
  • .naked-card
  • .pricing-card .heading .card-overlay

MDB Angular 6.2.4

What's new?

See the details below. All the changes are backward compatible.


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

1. Fixes

  • Resolved problem with event (noOptionsFound) in mdb-select. It should no longer be emitted on every input in the select filter
  • Resolved problem with display of vertical images in lightbox component
  • Resolved problem with mdb-collapse default collapsed state.

2. New features

3. Changed syntax

  • Collapse - you no longer need to use [mdbCollapse]="isCollapsed" syntax, instead just add mdbCollapse directive to the element and use [isCollapsed]="false" input if you want collapsible element to be open by default.

4. New documentation

5. Tutorials

MDB Angular 6.2.3

What's new?

See the details below. All the changes are backward compatible.


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

1. Fixes

  • Resolved problem with unemitted tooltipChange event in Tooltips
  • Resolved problem with select component with updateOn: 'blur' option
  • Resolved problem with display of select clear button when input [allowClear] is set to true
  • Resolved problem with fixed buttons where one button overlapped another. Use of many fixed buttons in the same view should be now possible
  • Resolved problem with label in date picker. It should no longer overlap on the displayed date
  • Fixed problem with overlapped label in Autocomplete when there was some value after view init,
  • Sidenav will now remove .fixed-sn or .hidden-sn class from body element in ngOnDestroy lifecycle,
  • Fixed problem with wrong margin in input validation message in Cascading Modal form,
  • Resolved problem with autoresizing textarea without .md-textarea-auto class
  • Resolved problem with visibility of content placed below header in intro sections,
  • Resolved problem with dynamic updates of big data in date-picker component,
  • Removed unnecessary console.log from Tabs Component,
  • .dropdown-menu-right class will now align dropdown menu to the right side,
  • Modal without backdrop will now allow to interact with elements on the background.

2. Docs

  • Added legacy docs for version 6.2.1
  • Dropdown alignment section - updated example code responsible for menu position,
  • Advanced modals - updated example code for modal advanced examples. Modal cookies, modal coupon, modal discount, modal related content and modal abandoned cart should no longer block interaction with other elements. In order to achieve this behaviour you need to add modal-scrolling class to the div with mdbModal directive.
  • Modals - added new section with instructions on how to open a modal from another component,
  • Intros - updated example codes to resolve problem with visibility of content placed below header,
  • Tabs & pills - improved documentation
  • Slider - improved documentation
  • Switch - improved documentation
  • Social Buttons - added examples how to get page share and like counters from Facebook API, and how to share a page on Facebook
  • Autocomplete - added example how to use [textSearching] input
  • Datepicker - Added methods, inputs and outputs description
  • Megamenu - changed first and third megamenu code
  • Navs - changed .nav-tabs class to .md-tabs.

3. New documentation

4. Changed syntax

6.2.2

Changes in ZIP:

The structure of the .zip package containing the MDB Angular Free project has changed. In the new version, instead of providing the source code as a .tgz archive, MDB is installed as dependency from the npm repository. The way of using the package does not change - just download the .zip archive, unpack it, and execute command npm install.

The structure of the zip package containing the MDB Angular Pro project has changed. In the new version, instead of sharing the source code as a .tgz archive, MDB is installed as dependency from the GitLab server. The way you use the new version of the package has changed slightly. To install a new version from the .zip package, download it, unpack it, open the package.json file and add your token instead of REPLACE_WITH_YOUR_TOKEN, then execute npm install command.

The old and new versions of the .zip pro will be available next month. After a month, only the new version of the package will be available.

Fixes:

  • Resolved problem with select filter. It should now display only values that match the word you type,
  • Resolved problem with select values and options that were updated dynamically. It should now work correctly both in template-driven and reactive forms,
  • Resolved problem with dateFormat and startDate options in DatePicker component. It is now possible to set default start date which will be formatted as it was specified in format option,
  • Resolved problem with auto resize textarea height,
  • Resolved problem with errorMessage and successMessage inputs - it is now possible to update messages dynamically,
  • Resolved file input problem with file upload,
  • Resolved problem with gesture support for lightbox,
  • Resolved problem with protected parameters in carousel component,
  • Resolved problem with 'mdb-card is not a known element',
  • Fixed problem with invisible arrow in Tooltip Component.

New features:

  • Added possibility to disable accordion item. To do that, add [isDisabled]="true" input to <mdb-accordion-item-head>,
  • Added new checkbox component.

Docs:

  • Updated live examples in pagination advanced examples section,
  • Updated file input example code,
  • Updated code in carousel examples (there was a problem with display of carousel with mask),
  • Updated checkbox docs,
  • Updated accordion docs with examples of nested and disabled accordion,
  • Added legacy docs for versions 6.0.0 and 6.1.0,
  • Added update instructions for MDB Admin Templates (free and pro).
6.2.1

Fixes:

  • Resolved problem when validation status was visible even when input was disabled,
  • Resolved problem with select focus event (clicking the space bar when the component is selected with tab key is no longer required),
  • Resolved problem with display of date-picker opened in the modal.

New features:

  • Added possibility to choose custom color in mdb-spinner,
  • Added new functionality to use only desired validation status (disabling success or error validation) by using [ validationSuccess ] ="true" or [ validationError ] = "true".
  • Added new [ errorMessage ] and [ successMessage ] inputs that allow to pass string or variable with custom validation message (only works when data-error and data-success are not available),
  • Added mdbBtn directive to handle button styling,
  • Added new mdb-card, mdb-card-body, mdb-card-img, mdb-card-header, mdb-card-footer, mdb-card-text, mdb-card-title components,
  • Added 'actionButton' option to alerts.

Docs:

  • Fixed bug with wrong validation status in Success and Error messages section in Inputs docs,
  • Added new section 'Navigation',
  • Added new page 'Mega menu',
  • Added new page 'Navs',
  • Added new page 'Hamburger menu',
  • Added new 'actionButton' option and new section 'Events' to Alerts docs,
  • Added description and examples for new inputs ([ errorMessage ] , [ successMessage ], [ validationSuccess ] , [ validationError ] ) in Inputs docs,
  • Removed duplicated elements from Autocomplete docs,
  • Updated Autocomplete docs with example of 'textNoResults'; usage,
  • Updated pagination advanced examples (added variables that allow to change the number of elements displayed on a given page).
6.2.0

MDB Angular Admin Templates:

  • Resolved problem with not working hamburger menu in Admin Dashboard Free,
  • Fixed problems with cards styling in Admin Dashboard Pro.

Fixes:

  • Fixed a problem with the inability to update the charts labels together with the data,
  • Resolved problem with only 1 image in Lightbox Component,
  • Fixed problem with undefined calls after (ngModelChange) in Material Select component,
  • Collapse directive won't throw undefined calls after emitting events,
  • Datepicker date changed from string to javascript Date object,
  • Fixed problem with unable to listen date changes in Datepicker Component,
  • Resolved problem with fixed button sliding out from the bottom edge of the screen when it was at the top of the screen,
  • Fixed simple warnings from ng lint,
  • Fixed problem with innability to update labels and data in Chart at one time.

Docs:

  • Described how to close Fixed Button content after click on some of his childs,
  • Improved documentation of adding translation into Datepicker Component,
  • Rewrote whole Modals Documentation section,
  • Described how to open collapse after view init,
  • Integration with ASP.NET Core moved from 5min-quickstart page to separate ASP.NET page,
  • On Multiselect page added description how to add initial value to it and how to get value changes,
  • Described how to update charts appearance dynamically.

Syntax changes:

  • In Carousels, <mdb-slide></mdb-slide> is now <mdb-carousel-item></mdb-carousel-item>,
  • Dropdown directive dropdown is now mdbDropdown,
  • Dropdown directive dropdownToggle is now mdbDropdownToggle,
  • In Popovers, popoverTitle is now mdbPopoverHeader,
  • In Flipping Cards, <mdb-card-rotating></mdb-card-rotating> is now <mdb-flipping-card></mdb-flipping-card>,
  • In Sidenav, <mdb-sidenav></mdb-sidenav> is now <mdb-side-nav></mdb-side-nav>,
  • In Accordion, <mdb-squeezebox></mdb-squeezebox> is now <mdb-accordion></mdb-accordion>,
  • In Accordion, <mdb-item></mdb-item> is now <mdb-accordion-item></mdb-accordion-item>,
  • In Accordion, <mdb-item-head></mdb-item-head> is now <mdb-accordion-item-head></mdb-accordion-item-head>,
  • In Accordion, <mdb-item-body></mdb-item-body> is now <mdb-accordion-item-body></mdb-accordion-item-body>,
  • In Autocomplete, <mdb-completer></mdb-completer> is now <mdb-autocomplete></mdb-autocomplete>,

These syntax changes are backward compatible, which means that your project will work with both the old and the new syntax. We recommend that you update the syntax as soon as possible. The changes will be backward compatible for several more versions.

6.1.6

Fixes:

  • Hotfix for input validation,
6.1.5

New Features:

  • Added .md-textarea-auto class which allows textarea to auto resize when would not fit into it. This feature requires mdbInputDirective on textarea,
  • Added functionality to set first active slide in Carousel.

Docs:

  • Described Card Reveal Component: https://mdbootstrap.com/plugins/angular/flipping-cards/,
  • Described changing opacity of alerts using toastClass option: https://mdbootstrap.com/docs/angular/components/alerts/

Fixes:

  • Solved problem in which backdrop in sidenav did not hide after scrolling the page on the mobile,
  • Fixed problem with rotating Time Picker arrow on mobile,
  • Fixed problem with (activeSlideChange) event in Carousel Component,
  • Solved problem with resetting state of validation in forms,
  • Fixed problem with scaling mdb-simple-chart, and centering text in chart.

Changed syntax:

Deprecated - these settings will be stored only by one version yet:

  • .personal-sm class,
  • .comments-list, .reply-form classes in blog components.
6.1.4

Fixes:

  • Solved problem with this.changes.disconnect is undefined in mdbInputDirective.
6.1.3

New Features:

  • Icons are now component. <mdb-icon></mdb-icon> supports only Font Awesome icons. Available field: icon (icon class), size (icon size), class (custom class for example color),
  • Number input now listens for key events. Added functionality to increment / decrement it's value by 10 or 0.1 by using shift + up / down arrow or alt + up / down arrow keys. Available by using mdbInputDirective

Fixes:

  • Fixed problems with Carousel when using Angular Universal,
  • mdbInputDirective validation has ben rewritten. Now works with Angular Validators,
  • Fixed problem with no backdrop in sidenav on mobile,
  • Fixed problem with sidenavBreakpoint.
6.1.2

Admin Templates:

  • We have provided users with the option to make their own changes to the source code and compile the library into JavaScript.

New Features:

  • Added possibility to use .filled-in class in Multiple Select by using customClass=" 'filled-in' " field,
  • Added possibility to set custom sidenav breakpoint by using sidenavBreakpoint="desired-value" control on mdb-sidenav element,
  • Added option to define custom locale for datePicker without modifying datepickerLocale.service source file,

Fixes:

  • Fixed problem with fluid modal-bottom,
  • Fixed problem with modal height while using datepicker in modal,
  • Fixed label lifting-up in Autocomplete,
  • Fixed problem with Material Dropdowns and dropup, dropleft, dropright variations,
  • Rewriten Material Select animation.
6.1.1

NOTE: You may need to rename the modules you are using in your application. The list of modified modules is presented below.

In 6.1.1 we have made it possible to import only those modules that you actually use in your application.
If only individual modules are used, import them but do not import the MDBBootstrapModulesPro main module as this may cause errors.

What's new:

  • Source code delivered to customers is now compilated to .js instead of .ts,
  • There's now possibility to import only those modules, which you need in your project. Full modules list
  • Changed names of few modules:
    • MDBChartsModule -> ChartsModule,
    • BsDropdownModule -> DropdownModule,
    • MDBTooltipModule -> TooltipModule,
    • SqueezeBoxModule -> AccordionModule,
    • Ng2CompleterModule -> AutocompleteModule,
    • MDBDatePickerModule -> DatepickerModule,
    • MDBUploaderModule -> FileInputModule,
    • MDBPageScrollModule -> SmoothscrollModule,
    • MdbStickyModule -> StickyContentModule,
    • MaterialRootModule -> PreloadersModule.

Fixes:

  • Fixed missing space in mdb-angular.scss file,
  • Added close icon to Autocomplete,
  • Fixed problem with prefilling Char Counter value,
  • Fixed problem with overlapping label & error / success messages with mdbInputDirective,
  • Fixed problem with focusing inputs through TAB key.
6.0.2

General:

  • Changed Renderer to Renderer2,

Fixes:

  • Unnable to scroll in Sidenav: Link,
  • Fixed problems with skins,
  • Fixed mobile view in DatePicker,
  • Fixed problem with scrolling page to the top edge in datePicker,
  • Fixed problem with scrolling page to the top edge in timePicker.

6.0.1

Fixes:

  • Fix for dropdowns, dropup variation,
  • Fix for fixed button when collapsing (need to pass $event in .toggle() method),
  • Few fixes in scss
6.0.0

NOTE: Most of the components have been rebuilt. Please, check the ones you use in your project.

General:

  • Compatible with MDB 4.5.1,
  • Compatible with Angular 6.0.0-rc.5, rxjs 6.0.0-uncanny-rc.7 and rxjs-compat 6.0.0-uncanny-rc.7,
  • Compatible with Angular CLI ^1.7.1.

NOTE 2: For proper using Angular 6 with MDB Angular 6 please check, if you're using rxjs in version at least 6.0.0-uncanny-rc.7 and rxjs-compat in version at least 6.0.0-uncanny-rc.7. Using older versions may produce errors and problems.

Marked as deprecated:

  • mdbActive,
  • mdbInputValidate,
  • mdbDeepDirective,
  • mdbRippleRadius.

mdbInputDirective has three of the above directives - mdbActive, mdbInputValidate and mdbDeepDirective.

mdbActive is used by default and we do not anticipate that you will be able to disable it.

mdbInputValidate is used by default, but the user can disable validation by using the [mdbValidate]="false" control on input which contains mdbInputDirective.

mdbDeepDirective is used by default when used on a checkbox or radio. It is possible to disable it by using [focusCheckbox]="false" and [focusRadio]="false".

mdbRippleRadius was changed to mdbWavesEffect. mdbRippleRadius will be deleted after next release.

Fixes:

  • Fix for z-index in few scenarios (tabs & datePicker), navbar and other,
  • Fixed clearUnselected in Autocomplete,
  • Fix for mdbActive in Autocomplete.

Features:

  • Added feature to close datePicker after selecting an date (closeAfterSelect: true) in datePicker options object.

Docs:

  • New category Forms,
  • Autocomplete, Inputs, Input Validation, Forms moved from Components to Forms,
  • Material Select moved from Advanced to Forms,
  • Input Groups moved from Extended to Forms,
  • Added instructions how to update Angular projects: Read
  • Added instructions how to create project with Angular Universal: Read

Changed syntax:

  • Cards,
  • Flipping Cards,
  • Intros,
  • Sections,
  • Inputs,
  • Footers,
  • Preloaders,
  • Masks,
  • Hover Effects,
  • Accordion,
  • Modals.
5.2.3

  • 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
5.2.2

  • Fix for npm distribution (only)
5.2.1

  • 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
5.2.0

  • 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
5.1.2

  • 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';
    
      @Component({
          selector: 'date-picker-component-example',
          templateUrl: 'toast.component.html'
      })
    
          export class DatePickerComponentExample {
          public myDatePickerOptions: IMyOptions = {
          minYear: 2015,
          maxYear: 2017
          };
      }
      

5.1.1

  • 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
5.1.0

  • 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
5.0.5

  • 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 tsconfig.app.json file inside src folder, however if you want to use it, path should be different)

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

    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:

      app.module.ts
      
        import { ToastModule } from ‘ng-mdb-pro/pro/alerts’;
        ...
      
        imports: [
        ...
        ToastModule.forRoot(),
        ...
        ],
        
      app.component.ts
      
        import {ToastService} from '../../typescripts/pro/alerts'
        ...
        constructor(
        ...
        private toast: ToastService
        ...
        ) { }
        

      Sample usage:

      
        ngOnInit() {
            setTimeout(
            () => this.toast.info("It works!")
            );
        }
        
    4.3.6

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

    4.3.5

    Fixed scss imports

    Updated How to install

    4.3.4

    Npm install fix

    4.3.3

    Scss files update

    4.3.2

    Fixed production build.

    4.3.1

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

    4.3.0

    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.


    4.2.0.

    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: office@mdbootstrap.com .

    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.


    4.1.0 version adds Sections and fixes few minor bugs.


      Changes:

    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