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.
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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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