Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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"
>

</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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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"
>

</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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(