Topic: Angular 18 Dropdown in Navbar is initially expanded
**Angular 18 Dropdown in Navbar should be collapsed initially****Dropdown is expanded******
ng new my-app
cd my-app
ng add mdb-angular-ui-kit
changed app.component.html to
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Dropdown -->
<li mdbDropdown class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" mdbDropdownToggle
aria-expanded="false">
Dropdown link
</a>
<ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Dropdown is expanded on startup and won't collapse on click
package.json
{
"name": "my-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/cdk": "^18.0.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"@fortawesome/fontawesome-free": "^6.0.0",
"chart.js": "^3.1.1",
"mdb-angular-ui-kit": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.9",
"@angular/cli": "^18.2.9",
"@angular/compiler-cli": "^18.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.2"
}
}
This problem is probably caused by a lack of the MdbDropdownModule import. Please make sure to import this module and include it in the imports array in the app.module.ts file (or add it to the component imports if you use standalone components).
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MdbDropdownModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
mh@komdatgroup.com pro premium priority commented 4 months ago
Yes, that solved it. Thank you!
sistemiUCSC pro premium priority commented a week ago
Anche io ho lstesso problema, è stato risolto e in che modo?
Arkadiusz Idzikowski staff commented a week ago
Please try to keep the conversation in English as we may not be able to answer your question.
The problem in this case was caused by the incorrect MDB configuration in the Angular project (no MdbDropdownModule import) and not by an error in the library code, so it is not something we can fix on our end. Did you try the solution I suggested in my answer?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 7.0.0
- Device: Laptop
- Browser: Chrome 130
- OS: Win11/ ng18
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 months ago
Are there any errors in the browser console when you try to close the dropdown menu?
mh@komdatgroup.com pro premium priority commented 5 months ago
No, nothing is shown in console