Angular 16 MDB5 Installation problem

Topic: Angular 16 MDB5 Installation problem

Karl Ennis priority asked 1 week ago

Expected behavior basic initial installation. trying to get drop downs, carousels, accordions etc working

Actual behavior - the i am using angular 16, when i use the latest git installation i get a compat error with due to animations 16, so i have installed mdb-angular-ui-kit 5.2.0 which does seem to have installed but i get no interactivity from the components eg dropdowns do not expand, carousels do not rotate, accordions do not respond.

If someone could point me in the right direction. I am adding mdb to an existing small project before trying to install it on my larger project incase of breaking.

Resources (screenshots, code snippets etc.) enter image description here

Arkadiusz Idzikowski staff commented 6 days ago

The latest MDB Angular version requires Angular 17. You would need to update Angular dependencies in your app in order to use it.

Did you import modules for all the mentioned components (accordion, carousel)? I can only see MdbDropdownModule in the screenshot.

Karl Ennis priority commented 6 days ago

Upgrading to angular 17 is not an option as we prefer to stick a version behind current for compatibility issues with other components. I have managed to get some mdb components working by adding #5.0.0 or similar for each module to the end of the git line. Is this the correct method for installing version specific mdb?

Arkadiusz Idzikowski staff commented 5 days ago

This is correct approach when you want to install a specific version. But its strange that 5.0.0 works correctly and 5.2.0 does not. Could you please check if there are any errors in the console when you try to use those components in 5.2.0 version?

Add comment

gregory109 free answered 17 hours ago

0 0 Best answer

Hello, @Karl Ennis

Let’s troubleshoot the issue with MDB (Material Design for Bootstrap) components in your Angular 16 project:

Compatibility and Dependencies:
Ensure that the version of mdb-angular-ui-kit (5.2.0) you’ve installed is compatible with Angular 16.
Verify that there are no conflicting dependencies or versions.
Animations Compatibility:
The issue you encountered with animations might be related to Angular’s animation module.
Check if your project has any custom animations or conflicting libraries.
Consider updating or adjusting your animations to work seamlessly with MDB components.
Component Initialization:
Confirm that you’ve correctly initialized the MDB components in your Angular project.
Check if you’ve imported the necessary modules and components (e.g., dropdowns, carousels, accordions) into your app module.
Check Console Errors:
Open your browser’s developer console (F12) and look for any error messages related to MDB components.
Address any issues reported in the console.
Verify Component Usage:
Make sure you’re using the correct syntax and attributes for MDB components in your templates.
For example, check if you’ve set up the correct directives for dropdowns, carousels, and accordions.
Test Isolated Components:
Create a minimal test component that includes an MDB dropdown, carousel, or accordion.
Verify if these components work as expected in isolation.
Gradually integrate them into your larger project once they function correctly.

I hope this info is helpful to you.

Best Regard,
Gregory Chavez

Please insert min. 20 characters.

Hello, @Karl Ennis

Let’s troubleshoot the issue with MDB (Material Design for Bootstrap) components in your Angular 16 project:

Compatibility and Dependencies: Ensure that the version of mdb-angular-ui-kit (5.2.0) you’ve installed is compatible with Angular 16. Verify that there are no conflicting dependencies or versions. Animations Compatibility: The issue you encountered with animations might be related to Angular’s animation module. Check if your project has any custom animations or conflicting libraries. Consider updating or adjusting your animations to work seamlessly with MDB components. Component Initialization: Confirm that you’ve correctly initialized the MDB components in your Angular project. Check if you’ve imported the necessary modules and components (e.g., dropdowns, carousels, accordions) into your app module. Check Console Errors: Open your browser’s developer console (F12) and look for any error messages related to MDB components. Address any issues reported in the console. Verify Component Usage: Make sure you’re using the correct syntax and attributes for MDB components in your templates. For example, check if you’ve set up the correct directives for dropdowns, carousels, and accordions. Test Isolated Components: Create a minimal test component that includes an MDB dropdown, carousel, or accordion. Verify if these components work as expected in isolation. Gradually integrate them into your larger project once they function correctly.

I hope this info is helpful to you.

Best Regard, Gregory Chavez

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 5.2.0
Device: Laptop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Karl Ennis

0Support score
1Questions 0Answers 0Snippets