MDB Angular UI Kit Documentation

The MDB Angular UI Kit provides over 700 components based on Bootstrap 5 and Material Design. Key component categories include:

• Buttons: Custom styles for various sizes and states.
• Spinners: Loading indicators built with HTML and CSS (no JavaScript required).
• Cards: Flexible content containers with headers, footers, and contextual backgrounds.
• Footer: Navigation components for links, buttons, and company info.
• Hover Effects: Interactive hover styles for elements.
• Notes: Small components for inserting additional information (alerts/typography).

Detailed documentation and practical examples for each component can be found in the MDB Angular Docs.

Comprehensive documentation for all MDB 5 Angular components, including usage examples, API references, and styling guides, can be found at the official documentation portal.

https://mdbootstrap.com/docs/angular/

To use MDB 5 Angular in your project, follow the official installation guide to set up the components and styles. Detailed steps for different environments are available at the official documentation site.

https://mdbootstrap.com/docs/angular/getting-started/installation/

You can install the MDB Angular UI Kit using several methods depending on your workflow:

1. npm: The recommended method for modern Angular development.
2. .zip: Download the package directly.
3. cdnjs: Use a CDN for quick prototyping or simple integrations.

For a detailed step-by-step guide, refer to the official installation documentation.

MDBGO is a hosting and deployment solution that provides:

• Free Hosting and WordPress support
• Custom domains and SSL support
• Free database
• Frontend & backend templates
• Webpack starter included
• Git repository, FTP, and Jenkins support

You can also use MDBGO + e-commerce shop integration for a one-click setup to create WordPress pages, travel blogs, or e-commerce shops.

MDBGO provides CLI tools and hosting services specifically designed for MDB projects. You can access these services at mdbgo.com.

https://mdbgo.com/

The ngAdd schematic automates the installation of the MDB Angular UI Kit into an Angular project. When executed via ng add mdb-angular-ui-kit, it performs the following actions:

1. Adds Core Dependencies: Automatically adds @angular/cdk, @angular/forms, and @angular/animations (targeting version ^21.0.0) to your package.json.
2. Conditional Add-ons:
   • If fontAwesome is enabled in the options, it adds @fortawesome/fontawesome-free (^6.0.0).
   • If charts is enabled in the options, it adds chart.js (^3.1.1).
3. Dependency Installation: Triggers a NodePackageInstallTask to install the newly added packages.
4. Post-Installation Setup: Runs a secondary schematic ng-add-mdb-setup after the main dependencies are installed to complete the configuration.

ng add mdb-angular-ui-kit --fontAwesome --charts

If you encounter issues or need assistance with MDB 5 Angular, you can access the dedicated support category for Angular.

https://mdbootstrap.com/support/cat/angular/

MDB provides extended documentation and specialized components for advanced UI requirements, including:

• Navigation & Menus: Hamburger Menus, Mega Menus, and Pagination.
• Data Display: Masonry layouts, Table Search, Table Scroll, Table Responsive, and Table Sort.
• Content Containers: Jumbotrons, Panels, and Media Objects.
• Input & Interaction: Multiselect, Textarea, Search, and Contact forms.
• Visual Styles: Gradients, Social Media Icons & Buttons, and Maps.

The Tabs component is exported via the projects/mdb-angular-ui-kit/tabs/index.ts entrypoint. To use the Tabs functionality in your Angular application, you must import the exported members from the public API of the tabs module. This component allows for creating navigable tabbed interfaces following Material Design principles.

import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';

// Import the module in your Angular NgModule or Standalone Component
@NgModule({
  imports: [MdbTabsModule],
  // ...
});

The Ripple component provides a Material Design-style ripple effect when interacting with elements. The public API for the Ripple component is exported from the ripple entrypoint. To use it, you typically import the necessary modules from the mdb-angular-ui-kit/ripple path and apply the ripple directive to your HTML elements.

import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';

// In your Angular module:
@NgModule({
  imports: [MdbRippleModule],
  // ...
})
export class AppModule { }

// In your component template:
// <button mdbRipple>Click me</button>

The Collapse component is part of the MDB Angular UI Kit. To use it, you must import the module or the component from the public API. This component is typically used to create expandable/collapsible sections in your UI.

import { MDBCollapseModule } from 'mdb-angular-ui-kit';

// In your Angular module:
@NgModule({
  imports: [MDBCollapseModule],
  // ...
})
export class AppModule { }