Topic: Angular 18 Dropdown in Navbar is initially expanded

mh@komdatgroup.com priority asked 1 week 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 1 week ago

Are there any errors in the browser console when you try to close the dropdown menu?


mh@komdatgroup.com priority commented 6 days ago

No, nothing is shown in console



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 { }


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • 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