How to toggle dropdown after click on icon using mdb-angular


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

julianpoemp asked 11 months 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"
  }
}

Arkadiusz Idzikowski staff answered 11 months ago

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 commented 11 months 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 commented 11 months 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