Topic: Angular 18 Dropdown in Navbar is initially expanded
mh@komdatgroup.com priority asked 3 weeks ago
**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"
}
}
Arkadiusz Idzikowski staff answered 2 weeks ago
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 { }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- 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 2 weeks ago
Are there any errors in the browser console when you try to close the dropdown menu?
mh@komdatgroup.com priority commented 2 weeks ago
No, nothing is shown in console