This version requires Angular v16. Follow the Angular update guide to migrate your project to Angular 16.
- Updated Angular to v16, this version is required in MDB Angular v5
- Updated Bootstrap to 5.2.3 version.
- Changed arrow styles in Select input
- Slightly changed hover styles in outline buttons to make them more elegant and subtle
- Fixed problems with schematics installation in MDB Angular Free version
- Fixed problem with display of Sidenav item when its content is translated with the
translate
pipe from the@ngx-translate
library - Fixed position of smaller icons in relation to the text in Rating
- Converted MDB components to CSS variables
- Added SCSS and CSS variables for
mdb-option
andmdb-option-group
components - Added access to the underlying component instance from ref element in Modal, Popconfirm, Alerts and Toasts
- Fixed default value display in Autocomplete when the value is an object
- Timepicker
- Fixed focus trap
- Fixed keyboard navigation in inline mode
- Fixed the problem with minTime and maxTime range
- Fixed Ripple effect on inputs styled as buttons
- Fixed background colors of Toasts and Alerts in MDB theme
- Modal
- Fixed the problem with scrollbar on bottom frame modal init
- Removed rounded corners from frame modals
- Removed unnecessary body scroll when using
scrollable
modal
- Datatable
- Removed ability to focus disabled buttons in pagination
- Fixed the problem with case-sensitive sorting
- Fixed the problem with hiding buttons in the Wysiwyg toolbar
- Fixed problem with event types in Select
- Fixed problem with
Rxjs operators
import paths in all the components and plugins
- Added new Data Parser plugin
- Added new Organization Chart plugin
- Added new Captcha plugin
- Added new Chips component
- Added new
[collapsible]
input to Scrollspy - Added new
[disableWindowScroll]
input to the Sidenav - Added new non-invasive Modal
- Datatable
- Added new
[forceSort]
input that allow to disable sort reset on third click - Added new
[disableSort]
input that allow to disable a specific sort header - Added new
[disabled]
input to pagination component
- Added new
- Datepicker
- Added new
[removeOkBtn]
,[removeCancelBtn]
and[removeClearBtn]
inputs that allow to remove specific buttons from the component footer - Addew new
[confirmDateOnSelect]
input that allow to select date without a confirmation by click onOk
button
Our basic color palette has been updated. We toned down our colors to be less flashy and more elegant and subtle. This affects virtually all of our components, so be aware of this before upgrading your project to v4.0.0.
Read colors docs to learn more about new palette.
- Added support for Angular 15, this Angular version is now required,
- Improved buttons
- Improved existing accordion and added new examples
- Improved stepper design
- Improved badges design and added new examples
- Improved popovers and popconfirm design
- Removed default configuration of
chartjs-plugin-datalabels
from charts, all plugins must be now registered before use
- Resolved problem with scrollbar initialization on element with a
mdbScrollbar
directive - Removed unnecessary border animation on initialization of
mdb-form-control
component - Resolved problem with global registration of controllers and plugins in charts
- Improved types in
mdbChart
directive inputs - Added some fixes to the transfer plugin
- Improved 'select all' option implementation
- Resolved problems with value updates in search bar input
- Resolved problems with component view updates when using pagination
- Improved theme styles in the following components:
- List group
- Pagination
- Datepicker
- Addew new color picker plugin plugin
- Addew new multi item carousel plugin
- Addew new ecommerce gallery plugin
- Addew new
[borderless]
input to accordion - Added new
[withPush]
input to dropdown - Added new
[plugins]
input to charts - Added public access to the chart instance in
mdbChart
directive - Added new
[ofText]
input to datatables - Added new
[titleSource]
and[titleTarget]
inputs to transfer plugin
- Timepicker
- Removed border styles displayed on focused elements
- Resolved problems with keyboard navigation
- It will be now possible to jump to any step in linear stepper, as long as all previous steps are completed
- Resolved problems with
acceptedExtensions
in file upload plugin - Select all option will now select/deselect only filtered options when used inside a select component with filter
- Events
itemShown
anditemHidden
in accordion will be now correctly emitted after animation end - Resolved problem with close animation in popconfirm
- Resolved problem with value returned to autocomplete form control on option selection
- Resolved problem with wrong page value returned by
(paginationChange)
event in datatable - Increased backdrop z-index in onboarding plugin
- Resolved problem with
autohide
option in toast, notification will be removed only if it is not hovered - Added default padding to the content container in WYSIWYG editor plugin
- Resolved problem with Angular dependencies versions in schematics installation
- Addew new color picker plugin
- Addew new scroll status plugin
This version requires Angular v14 and Node 14.15.0 (or later). Follow the Angular update guide to migrate your project to Angular 14:
- Added support for Angular 14, this Angular version is now required,
- Removed
~
from styles imports, this syntax is now deprecated - Updated calendar plugin:
- redesigned toolbar, events, views and modals
- replaced view toggle buttons with select
- created an
Add event
button - added blur option to style past events
- improved long events styling
- improved responsiveness
- Design changes:
- Changed shadows for components such as card, popover, toast, modal, image hoverable, dropdown menu, popconfirm
- Changed styling of border for card, modal, header and footer
- Changed table font weight and text color
- Changed checkbox and radio border color
- Changed switch background color
- Changed checkbox border radius size
- Changed list group, pagination and dropdown text color as it is in the body
- Changed toast color palette
- Changed datatables striped and hover background color as it is in the usual table
- Changed select states background colors
- Changed sidenav icons colors and width of the slim version
- Added new toast color classes that replaced background color classes. Old:
toast bg-primary
. New:toast toast-primary
- Lightbox
- Resolved problems with zoom
- Resolved problems with swipe on mobile devices
- Resolved problem with display of smaller images
- Fixed image position in fullscreen mode
- Disabled elements will no longer be displayed inside the component modal
- Fixed problems with
rebuild
method in charts - Replaced hardcoded color values with SCSS variables in autocomplete and select
- Resolved problem with carousel animations inside a component with OnPush change detection strategy
- Position of dropdown menus in all components will be now correctly updated on scroll event
- Resolved problem with fade animation in tabs
- Label values in select will be now dynamically updated on option label change
- All event listeners in the WYSIWYG plugin will be now correctly removed when component is destroyed
- Resolved problem with input label position when browser autofill is used
- Addew new countdown plugin
- Addew new input mask plugin
- Addew new parallax plugin
- Addew new multi range component
- Added new
[fade]
input that allow to toggle fade animations in tabs
- Updated icon colors of basic light navbar and footer with secondary color
- Added new horizontal dividers classes
.hr
and.hr-blurry
- Updated styles of vertical divider class
.vr
and add new class.vr-blurry
- Added new sidenav with menu categories and class
.sidenav-sm
- Added new
object-fit
andobject-position
utilities
- Deprecated button close classes. Old:
.close
. New:.btn-close
and.btn-close-white
- Deprecated embed classes. Old:
.embed
. New:.ratio
- Deprecated flag classes. Check flags docs
- Deprecated utils
.divider-horizontal
and.divider-horizontal-blurry
.divider-vertical
and.divider-vertical-blurry
- Sidenav
- Resolved problems with arrow position updates in slim mode and accordion mode
- Resolved problem with initialization of component with
[right]="true"
and[hidden]="false"
options - Fixed problem with long content display in component with
[right]="true"
option
- Fixed problems with long label positioning in checkbox, switch and radio
- Resolved problem with multiple
paginationChange
events emitted on datatable initialization - Resolved problems with pagination and accordion styles when using theme
- Fixed problem with max file quantity in file upload plugin with
multiple
mode - Resolved problem with first option highlight in select with a
[highlightFirst]="false"
option - Added
type="button"
to the 'insert horizontal line' button in WYSIWYG to resolve problem with form submit - Zero-length tooltip and popover will no longer be displayed
- Fixed problem with multiple
(selected)
events emitted after click on autocomplete option
- Addew new onboarding plugin
- Stepper
- Added possibility to block step navigation on step header click
- Added possibility to edit buttons and header text in mobile mode
- Added new
--mdb-bg-opacity
CSS variable - Added optional auto select on tab-out in select and autocomplete
- Added list group new variant with
.list-group-light
class - Added
.table-group-divider
and.table-divider-color
classes to emphasize the separation of thead from tbody - Added new
.divider-horizontal
,.divider-vertical
,.divider-horizontal-blurry
and.divider-vertical-blurry
classes
- Datepicker - resolved problem with returned month value when
m
format is used, - Treeview - resolved problem with
(selected)
event emit when selecting checkbox, - Select - resolved problem with keyboard navigation and option highlight after filter input is used.
- Charts - resolved problem with chart options being overriden by options defined for other charts,
- Range - resolved problem with thumb position update after change in
ngModel
orformControl
- Added filter plugin
- Dropdown - added keyboard navigation
- Datepicker - resolved problem with validation of date typed into input,
- Sidenav - removed unnecessary transition animation on initialization in slim mode,
- File upload plugin - fixed typo in main error message,
- Carousel/Lightbox - updated icons styles for Font Awesome v6.
- Added support for Angular 13, this Angular version is now required,
- Sidenav - removed support for automatic item expansion based on an active link (in our documentation you can find information on how to achieve this effect using methods provided by Angular Router).
- Updated Font Awesome to v6.0.0
- Toasts/Alerts - resolved problem with positioning when stacking and position bottom options are used,
- Select/Datepicker - resolved problems with input, label and icons styles when
form-white
class is used onmdb-form-control
component, - Select - resolved problem with selection when multiple options have the same label (in some cases component incorrectly displayed option value instead of option label in input),
- Datatable pagination - component will now display correct information when data source is empty.
- Tabs - added new
[navColumnClass]
and[contentColumnClass]
inputs that allow to customize width of the navigation and content sections in vertical mode.
- Documentation migration from Wordpress to Hugo,
- Updated code in snippets in documentation to work properly with tsconfig strict settings.
- Input - resolved problem with label position in input with type="date",
- Datepicker/Timepicker - improved backdrop animation (removed unnecessary delay),
- Datepicker - resolved problem with navigation using previous/next arrows when min and max date is specified,
- Sidenav - animation of the collapsed item in slim mode will be now in sync with animation of the menu (previously there was unnecessary delay)
- Select - list of filtered options will be now correctly reset after the dropdown menu is closed,
- Treeview plugin - click on checkbox will no longer change collapsed state of the node,
- Treeview plugin - checked state of the checkox in parent node will be now in sync with the checkboxes in child nodes.
- Updated Bootstrap to 5.1.3 version.
- Charts - resolved problem with
chartjs-plugin-datalabels
configuration, - Carousel - component should now work correctly inside components with
OnPush
change detection strategy, - Table - updated
dataSource
type to resolve problem with asynchronous data and async pipe, - File upload plugin - resolved problem with extensions handled by the
acceptedExtensions
input, - Popconfirm - target element will be now optional in modal display mode,
- Sidenav - resolved problem with
child.querySelector is not a function
error when usingngFor
directive to render sidenav items, - Popover -
mdbPopover
input will now correctly accept value withTemplateRef
type.
- Dropdown - added new
closeOnOutsideClick
,closeOnItemClick
,closeOnEsc
inputs that allow to configure menu closing actions, - File upload plugin - added a new
reset
method that allow to reset component state to default settings.
- Toast/Alert - resolved problem with stacking and close animation,
- Modal - resolved problem with closing when mouseup event is detected outside the component,
- Sidenav - setting
hidden
input tofalse
will no longer trigger component animation, - Sidenav - resolved problem with arrow rotation update when
[collapsed]="false"
is used, - Sidenav - removed focus trap in side and push modes,
- Sidenav - default position will be now correctly set to
fixed
, - Input - resolved problem with border top gap recalculation when used inside a dynamically loaded component (such as tabs),
- Overlay - resolved problem with z-index in components using overlay (e.g. modal, popconfirm, tooltip, components with dropdown menus). The components will be correctly displayed above the elements with sticky/fixed styles,
- Charts - fixed default options and resolved problem with custom options merge.
- resolved problem with automatic updates of colors defined in
colorMap
, - resolved problem with tooltip display when
[hover]="false"
is used, - added possibility to display custom tooltips.
- Popover/Tooltip - resolved problem with closing component when quickly moving mouse over trigger element
- Table pagination - resolved problem with disabled state of next button,
- Input - resolved problem with disabled state updates using Angular form control methods,
- Table - resolved problem with default filter function,
- Datepicker - resolved problem with disabled state of toggle button,
- Timepicker - resolved problem with setting default value in component with 24h format,
- Sidenav - resolved problem with
Cannot read property destroy of undefined
error, - Select - resolved problem with disabled state of checkboxes in options,
- Select - resolved problem with closing modal on clear button click,
- Dropdown - menu will be now closed correctly on item click.
- Table pagination - added new
rowsPerPageText
input that allow to change default 'Rows per page' text
In this version we introduced some breaking changes, please check Breaking changes
section and update your application accordingly.
- Inputs - removed
margin-bottom
styles from inputs with validation classes.
- Select - dropdown will be correctly removed on component destroy,
- Select - resolved problem with select-all option state on component initialization,
- Select - resolved problem with selection of options with false values,
- Dropdown - resolved problem with opening component on icon click,
- Toasts/Alerts - resolved problem with z-index,
- Popconfirm - resolved problem with
onClose
andonConfirm
events, - Loading management - backdrop will be correctly removed on component destroy when fullscreen option is used,
- Timepicker - resolved problem with setting default value using Angular form controls,
- Datepicker - previous/next button disabled state will be now correctly updated on component initialization,
- Datepicker/Timepicker - click on toggle button will no longer submit form,
- Datepicker/Timepicker - resolved problems with
valueChanges
event and validation status updates, - Datatables - resolved problem with scroll position when component is rendered inside a tab.
In this version we introduced some breaking changes, please check Breaking changes
section and update your application accordingly.
- Popover -
[template]
input will now accept value of typeTemplateRef
and can be used to displayng-template
content.
- Toast - component will no longer throw error after reopening,
- Toast - stacked components will now slide up automatically,
- Sidenav - resolved problem with auto expand when route has route parameters,
- Dropdown - opened menu will be now correctly destroyed on route change,
- Table pagination - resolved problem with data automatic updates after change in
[entryOptions]
input.
- Popover -
[template]
input will now accept value of typeTemplateRef
and can be used to displayng-template
content.
In this version we introduced some breaking changes, please check Breaking changes
section and update your application accordingly.
- Changed
mdb-select-option
selector tomdb-option
, - Removed
select-
prefix from option and option group class names, - Moved option and option group styles to individual file.
- Sidenav - resolved problem with arrow icons in collapsed items,
- Sidenav - resolved problem with z-index,
- Select - resolved problem with dropdown toggle on arrow icon click,
- Input - resolved problem with label position when setting value dynamically using Angular form controls.
- Select - added new
[filterPlaceholder]
input that allow to change filter input placeholder.
In this version we introduced some breaking changes, please check Breaking changes
section and update your application accordingly. The list of all individual modules and entry points can be found here:
MDB Angular UI Kit Free Modules And Imports
MDB Angular UI Kit Pro Essential Modules And Imports
- Updated Angular to v12 (this version is now required),
- Components, modules and types can no longer be imported from
mdb-angular-ui-kit
entry point. Use the newly added secondary entry points, such asmdb-angular-ui-kit/checkbox
to import individual elements, - Removed main
MdbModule
, import individual modules from its entry points, for example:import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox'
, - Renamed
MdbTimePickerComponent
toMdbTimepickerComponent
, - Renamed
MdbTimePickerDirective
toMdbTimepickerDirective
, - Renamed
MdbTimePickerModule
toMdbTimepickerModule
, - Updated Bootstrap styles to the latest stable version.
- Redesigned shadows for components: Cards, Dropdowns, Modal, Popover, Toasts, Buttons, Button Group, Navbar, Pagination, Pills, Sidenav,
- Redesigned padding for components: Alerts, Cards, List Group,
- Redesigned border radius to 0.5rem for components: Alerts, Cards, Dropdowns, Modal, List group, Popover, Toasts, Dateipcker, Timepicker.
- Sidenav - resolved problem with height of the element with
.sidenav-menu
class, - Range - resolved problem with a hardcoded
Example label
text, - Datepicker -
dateChanged
event will be now correctly emited on date change, - Datepicker - resolved problem with components updates on Angular form control changes,
- File input - updated styles to Material Design styles,
- Pills - fixed width of pills when they're filled or justified,
- Checkbox/Switch/Radio - fix margin styles and positioning.
- Navbar - added a new
.navbar-nav-scroll
class to enable vertical scrolling when a collapsed navbar is opened, - Navbar - re-added
flex-grow
to the.navbar-collapse
to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished, - List group - added a new
.list-group-numbered
variation to list groups that uses pseudo-elements for numbering list group items, - Shadows - added a new styles design: shadows soft, shadows standard, shadows strong,
- Added color-scheme mixin.
- Animations - resolved problem with parameters in HTML template,
- Sidenav - resolved problems with
mode
andhidden
inputs, - Sidenav - resolved problem with
show
method.
- Datepicker - resolved problem with keyboard navigation when using
DownArrow
key, - Datepicker - resolved problem with selecting dates using
Enter/Space
keys in component with date filter, - Datepicker - added correct aria-labels to the previous/next buttons in the days view.
- Scrollspy - added
cursor: pointer
styles to scrollspy links, - Sidenav - resolved problem with errors when
RouterModule
is not imported, - Sidenav - component will be correctly updated on inputs changes,
- Sidenav - resolved problem with scroll position,
- Sidenav - added components and module exports to main library index.
- Animations - added new animations:
slideLeft
,slideRight
,slideUp
,slideDown
, - Sidenav - added focus trap,
- Sidenav - escape button will now close the component.
- Select -
x options selected
text will be displayed correctly when more than 5 options have been selected, - Select - fixed clear button focusing issue.
- Select - added new
displayedLabels
input that allows to change maximum number of comma-separated options labels displayed in the multiselect input, - Select - added new
optionsSelectedLabel
input that allows to customize x options selected text, - Select - added new
filterDebounce
input that allows to add delay to the options list updates when using filter input
The initial release of MDB 5 Angular Alpha 1.
- Badges
- Buttons
- Button Group
- Cards
- Collapse
- List Group
- Progress
- Spinners
- Tables
- Breadcrumb
- Footer
- Headers
- Navbar
- Pagination
- Layout
- Utilities
- Content & styles