Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Angular 18 Dropdown in Navbar is initially expanded

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

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


mh@komdatgroup.com priority commented 1 month ago

No, nothing is shown in console


Arkadiusz Idzikowski staff answered 1 month 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 priority commented 1 month 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

  • 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