Angular 18 Dropdown in Navbar is initially expanded


Topic: Angular 18 Dropdown in Navbar is initially expanded

mh@komdatgroup.com pro premium priority asked 2 months 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 commented 2 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 2 months ago

No, nothing is shown in console


Arkadiusz Idzikowski staff answered 1 months 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 { }

mh@komdatgroup.com pro premium priority commented 1 months ago

Yes, that solved it. Thank you!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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