Topic: How to toggle dropdown after click on icon using mdb-angular-ui-kit?
julianpoemp free asked 3 years 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 3 years 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 free commented 3 years 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 3 years 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
- ForumUser: 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
viknesh b free commented 2 years 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 2 years 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.