Topic: How to toggle dropdown after click on icon using mdb-angular-ui-kit?

julianpoemp free asked 1 year ago


I'm currently trying to create a dropdown with only one icon using mdb-angular-ui-kit (I'm using 1.0.0-beta6). When I click on the icon nothing happens. If I click next to the icon, the menu appears.

How can I fix this? You can find a test project here, I couldn't install the toolkit on a stackblitz project.


enter image description here


app.component.html

<div mdbDropdown class="dropdown">
  <button
    class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    aria-expanded="false"
    mdbDropdownToggle
  >
    <i class="fa fa-cog"></i>
  </button>
  <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {MdbDropdownDirective} from 'mdb-angular-ui-kit/dropdown';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mdbTest';
}

styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

package.json

{
  "name": "mdb-test",
  "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": "~12.0.3",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "mdb-angular-ui-kit": "^1.0.0-beta6",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

viknesh b free commented 8 months ago

TS2307: Cannot find module 'mdb-angular-ui-kit/dropdown'.

14 import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown'; //Issue// { "name": "mdb-test", "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": "~12.0.3", "@angular/cdk": "^12.0.0", "@angular/common": "~12.0.3", "@angular/compiler": "~12.0.3", "@angular/core": "~12.0.3", "@angular/forms": "~12.0.3", "@angular/platform-browser": "~12.0.3", "@angular/platform-browser-dynamic": "~12.0.3", "@angular/router": "~12.0.3", "@fortawesome/fontawesome-free": "^5.15.1", "mdb-angular-ui-kit": "^1.0.0-beta6", "rxjs": "~6.6.0", "tslib": "^2.1.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.0.3", "@angular/cli": "~12.0.3", "@angular/compiler-cli": "~12.0.3", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "typescript": "~4.2.3" } } change to this still same issue


Arkadiusz Idzikowski staff commented 8 months ago

Can you make sure that the mdb-angular-ui-kit dependency was installed correctly? We recommend updating to the 1.6.1 version if you need support for Angular 12.



Thank you for reporting this problem, we will need to fix that on our end.

As a workaround for now, please try to use this code:

<div mdbDropdown #dropdown class="dropdown">
        <button
        class="btn btn-primary dropdown-toggle"
        type="button"
        id="dropdownMenuButton"
        aria-expanded="false"
        mdbDropdownToggle
      >
        <i class="fa fa-cog" (click)="dropdown.toggle(); $event.stopPropagation()"></i>
      </button>
  <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

julianpoemp free commented 1 year ago

thanks! In the meantime I switched to the bs4 version because I need an stable version of mdb angular. I'll try the bs5 version in the future when it's not in beta anymore.


julianpoemp free commented 1 year ago

I tested your workaround in my test application. It works!



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

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: Macbook Pro
  • Browser: Google Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes