mdb-angular-ui-kit

Bootstrap 5 & Angular 18 UI KIT - 700+ components, MIT license, simple installation.

MDB is a collection of free Bootstrap templates, themes, design tools & resources.

---

Get started

>> Get Started in 1 minute

Simple installation via .zip, npm or cdnjs.

>> Install with MDBGO

Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support.

>> Install with MDBGO + e-commerce shop integration

One click setup! MDB GO allows you to create a WordPress page with a single click. Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.

About Material Design for Bootstrap 5 & Angular 18

Created by

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

700+ UI components Super simple, 1 minute installation Detailed docs & practical examples Lots of tutorials Huge and active community MIT license - free for personal & commercial use

---

Bootstrap 5 tutorial

>> Learn more about Bootstrap 5

>> Bootstrap 5 Tutorial

>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials

Start learning from Basics	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.

---

Extended documentation

• Bootstrap Angular Code Blocks
• Bootstrap Angular Gallery
• Bootstrap Angular Hamburger Menu
• Bootstrap Angular Jumbotron
• Bootstrap Angular Maps
• Bootstrap Angular Media Object
• Bootstrap Angular Mega Menu
• Bootstrap Angular Multiselect
• Bootstrap Angular Social Media Icons & Buttons
• Bootstrap Angular Textarea
• Bootstrap Angular Table Search
• Bootstrap Angular Table Scroll
• Bootstrap Angular Table Responsive
• Bootstrap Angular Table Sort
• Bootstrap Angular Panels
• Bootstrap Angular Masonry
• Bootstrap Angular Contact
• Bootstrap Angular Gradients
• Bootstrap Angular Pagination
• Bootstrap Angular Search

Changelog

7.0.0 (16.09.2024)

This version requires Angular v18. Follow the Angular Update Guide to migrate your project to Angular 18.

Breaking changes:

• Updated Angular to v18, this version is required in MDB Angular v7.
• Checkbox - changed margin-right style from 4px to 6px in .form-check-input element.
• Forms - added padding-left: 0.15rem style to .form-check-label element.
• Switch - changed margin-right style from 4px to 8px in .form-check-input element.
• Progress - added box-shadow: none style to .progress element.
• Input group - added flex-wrap: nowrap style to .input-group element.
• Datepicker - changed SCSS variable $datepicker-small-cell-content-width value from 36px to 40px.
• Range:
  • Added box-shadow: none style to .form-range ::-webkit-slider-runnable-track element.
  • Added box-shadow: none style to .form-range ::-moz-range-track element.
• Captcha:
  • Changed error event name to captchaError.
  • Changed expire event name to captchaExpire.
  • Changed success event name to captchaSuccess.
• Timepicker:
  • Redesigned clock's page HTML structure and styles.
  • Arrow icons are now displayed when hour/minute buttons are hovered in inline mode.
• Treeview:
  • Redesigned entire HTML structure.
  • Replaced li element with mdb-treeview-item.
  • Removed the <div class="treeview"> wrapper element from the entire component.
  • Removed the checkboxesField input.
  • Added a public MdbTreeviewColor type for the color input.
  • Added a new mechanism for setting the arrow icon with the collapseIcon property.
  • Added keyboard navigation handling.

Fixes and improvements:

• Multi range - resolved the issue with TouchEvent in Firefox.
• Select - resolved the issue with unhandled tabindex input.
• Onboarding - resolved the issue with initializing onboarding with a delay after navigating to another page.
• Input fields - resolved the issue with displaying the value after setting it programmatically in all inputs with built-in placeholders (e.g., datetime-local or time).
• Datatable - resolved the issue with the showAllEntries input not working properly with the entries input.
• Timepicker - resolved the issue with ArrowUp and ArrowDown key presses not working upon opening the timepicker.
• Datepicker:
  • Resolved the issue with returned form control values for empty or invalid input values.
  • Resolved the issue with closing the datepicker using the input toggle.
• Calendar:
  • Resolved the issue with unpreserved event IDs on edit.
  • Resolved the issue with dragging in readonly mode.
  • Resolved the issue with view selection when non-default captions are used.
  • Resolved the issue with rendering the period in the correct format in Month view.

New features:

• Dropdown - added MdbDropdownPositionClass type to the public API.
• Modal - added focusElementSelector property to the open method's options for specifying the element to focus on when the modal opens.
• Calendar:
  • Added addEventButtonCaption property to the options input for setting a custom caption for the add event button.
  • Added MdbCalendarViews Enum to the public API.

---