Topic: Dropdown link example doesn't populate menu
Expected behavior
Menu drops down
Actual behavior
No menu is working.
Resources (screenshots, code snippets etc.)
I have added the MDB pro components to my project. I am not sure how to install them into my page. I imported them into the typescript file, but the page still doesn't recognize that these components are there. The CSS files have been added as well.
Drop down link example from the MDB website when added to my project just reloads on click.
This version of the MDB library (MDB Standard) is not intended for use in Angular projects. We recommend using MDB 5 Angular version instead.
Evolet free commented 2 years ago
Thanks, do you have a link to that part of the mdb site or where I could find that? Is it in the github project download (mdb5-angular-ui-kit-pro-essential), that mdb.min.js library for MDB 5 angular that you are referring to?
Arkadiusz Idzikowski staff commented 2 years ago
@Evolet You can find more information in our documentation: https://mdbootstrap.com/docs/b5/angular/
The library is called mdb-angular-ui-kit and the essential package you mentioned is a pro version of this library.
Evolet free commented 2 years ago
Yeah, I was asking if there is documentation on how to install the pro version dependencies. I have the free version. I downloaded the pro project from the git repository. I added them in but that didn't fix the issue I am having above. Is there any additional installation/configuration for the pro version of the libraries? or Cli commands?
Evolet free commented 2 years ago
Specifically is there a pro version of this file: src/assets/js/mdb.min.js that will provide similar functions for the pro libraries without an error.
Arkadiusz Idzikowski staff commented 2 years ago
@Evolet If you need to add the MDB5 Standard Essential library (mdb.min.js) code to the Angular application then I'm afraid we won't be able to help with the configuration. As I mentioned in my previous answer, we do not recommend using this version in Angular applications. We created another library (MDB5 Angular) which allows you to easily add MDB to Angular applications.
You can find more information about the Angular version of MDB in our documentation: https://mdbootstrap.com/docs/b5/angular/
We will be happy to help in case of any problems with the installation of this version.
Evolet free commented 2 years ago
Ok well is there an alternate way to get the dropdown menus to work without that library in the new angular pro version? I am having trouble differentiating between free and pro versions of your documentation to get the correct code.
Arkadiusz Idzikowski staff commented 2 years ago
@Evolet I'm still not sure which MDB product (MDB Standard or MDB Angular) you try to configure so it is difficult to help. The dropdown menu is a free component so the lack of the pro version should not be a source of the problem in this case.
For the Angular applications, we recommend MDB5 Angular (https://mdbootstrap.com/docs/b5/angular/). We do not test MDB Standard (https://mdbootstrap.com/) code in Angular apps and we won't be able to help with the configuration and other problems in this case.
In the side nav menu on the left, you can find installation guides for the free version (Getting started -> installation) and the pro version (MDB Pro -> installation).
To correctly configure MDB5 Angular Pro library you need to follow this guide: https://mdbootstrap.com/docs/b5/angular/pro/installation/
Evolet free commented 2 years ago
For MDB angular what menus do you recommend? Is there a separate support forum for that product or should I stay here for questions regarding configuration? I can remove the free mdb product and menus from my Angular project. I am trying to ensure I install MDB Angular Pro essentials version correctly. Is there anything else you recommend? I was unable to get the MDB CLI to work so I am just importing the project and modules.
Arkadiusz Idzikowski staff commented 2 years ago
This forum section is dedicated to the problems with MDB Angular, you may consider creating a new thread if you encounter any new problems (for example with installation and configuration), it will be easier to help when you describe a specific problem in a separate thread.
Please follow our pro installation guide to install the MDB Angular Pro Essentials library: (https://mdbootstrap.com/docs/b5/angular/pro/installation/) and let me know if you encounter any problems with installation/configuration.
Then you can use our documentation for specific components to build the application. For example, you can find the dropdown/menu documentation here: https://mdbootstrap.com/docs/b5/angular/components/dropdowns/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 2.0.0
- Device: Laptop
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No
Evolet free commented 2 years ago
If I add the "src/assets/js/mdb.min.js" to angular.json it works but throws other error, but it also is for the free version and I wanted pro version. The mdb.min.js throws this error in the console:
Uncaught TypeError: Cannot read properties of null (reading 'style') at o.value (mdb.min.js:19:190873) at o.value (mdb.min.js:19:191367) at mdb.min.js:19:191245 at u (mdb.min.js:19:47248) at o.value (mdb.min.js:19:191232) at HTMLInputElement. (mdb.min.js:19:187876) at HTMLDocument.t (mdb.min.js:19:50328) at _ZoneDelegate.invokeTask (zone.js:406:1) at Zone.runTask (zone.js:178:1) at ZoneTask.invokeTask [as invoke] (zone.js:487:1)value @ mdb.min.js:19value @ mdb.min.js:19(anonymous) @ mdb.min.js:19u @ mdb.min.js:19value @ mdb.min.js:19(anonymous) @ mdb.min.js:19t @ mdb.min.js:19invokeTask @ zone.js:406runTask @ zone.js:178invokeTask @ zone.js:487invokeTask @ zone.js:1648globalCallback @ zone.js:1691globalZoneAwareCaptureCallback @ zone.js:1716