Issue with data-kt-menu-trigger attribute in Metronic Angular V8.2.5
Hello,
I am using Metronic's Angular latest version V8.2.5.
I'm currently in the process of implementing a custom user-inner dropdown component within the navbar component of my application. However, I've encountered an issue with the behavior of the data-kt-menu-trigger attribute. Specifically, when I set it to 'click', the dropdowns menu fails to toggle as expected. But when I switch it to 'hover', everything works fine.
Can you assist on implementing the menu-trigger toggle?
Thank you,
<pre lang="html>
<!--begin::User menu-->
<div class="app-navbar-item" [ngClass]="itemClass">
<!--begin::Menu wrapper-->
<div
class="cursor-pointer symbol"
[ngClass]="userAvatarClass"
data-kt-menu-trigger="{default: 'click'}"
data-kt-menu-attach="parent"
data-kt-menu-placement="bottom-end"
>
<img src="./assets/media/avatars/300-3.jpg" />
</div>
<app-user-inner data-kt-menu="true" data-kt-menu="true" class="menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px"></app-user-inner>
<!--end::Menu wrapper-->
</div>
</pre>
Replies (2)
Hi
Sorry for the delay. Please try using data-kt-menu-trigger="click" for the data-kt-menu-trigger attribute.
You have data-kt-menu="true" twice in your <app-user-inner> element. Try removing one so that the data-kt-menu attribute is only specified once.
Thanks
Hi,
I tried, didn't work. remains unchanged.
But, data-kt-menu-trigger="hover" works.
What is the reason that 'click' does not work?
<pre lang="html>
<div class="app-navbar-item" [ngClass]="itemClass">
<div
class="cursor-pointer symbol"
[ngClass]="userAvatarClass"
data-kt-menu-trigger="click"
data-kt-menu-attach="parent"
data-kt-menu-placement="bottom-end"
>
<img src="./assets/media/avatars/300-3.jpg" />
</div>
<app-user-inner data-kt-menu="true" class="menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px"></app-user-inner>
</div>
</pre>
