Angular Drop down is not working and by default remains open

Topic: Angular Drop down is not working and by default remains open

varunsingh91 priority asked 3 days ago

*Expected behavior*drop down open and close should work and by default the dropdown should be close which is right here in open state.

*Actual behavior*dropdown is not working and by default dropdown state is open.

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

here is the snippet code i have used. (its just copy and paste from components navbar)

Packages Imported to app.config.jsproviders: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations(), provideAnimationsAsync(), provideHttpClient(), importProvidersFrom( [ BrowserModule, BrowserAnimationsModule ] ), provideAnimations()

]

packages installed and configured in angular.js"styles": [ "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "./node_modules/@popperjs/core/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/chart.js/dist/chart.js" ]

version of the above packages are listed below."@fortawesome/fontawesome-free": "^6.7.0", "@popperjs/core": "^2.11.8", "@types/jquery": "^3.5.32", "bootstrap": "^5.3.3", "chart.js": "^3.1.1", "jquery": "^3.7.1", "mdb-angular-ui-kit": "git+https://oauth2:ProAccessToken@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential",

Please help me to rectify the issue as i am stuck and I am using Angular version 18.*.

Add comment

judith75hodges free answered 14 hours ago

0 0 Best answer

Please insert min. 20 characters.

It’s fascinating how this overlap opens up an opportunity to rethink how we build UI components—especially when Angular’s capabilities, like ngClass or its native form controls, can simplify and streamline the management of dynamic UI elements like dropdowns. The rise of Angular-centric UI kits like MDB or ngx-bootstrap shows a clear trend toward providing solutions that mesh more seamlessly with Angular’s change detection cycle, and moving away from jQuery-based approaches can often lead to more maintainable and performant applications. It's also a great reminder that as frameworks evolve, sometimes the best practices shift, encouraging us to think outside the box and re-evaluate our toolkit. What’s even more interesting is how this could serve as a gateway for exploring other Angular-native component libraries that offer rich functionality without relying on jQuery or external dependencies.

Add comment

Arkadiusz Idzikowski staff answered 3 days ago