Material2 How to open md-menu on mouseenter

Question

I am using Material 2 to create a menu. I have a md-button trigger that opens a md-menu. I want the button to open on hover. I know that the Material Angular.io is still pre

Answer 1

You can do it by manually triggering the openMenu() method on mouseenter.

Example:

<button md-icon-button 
        [md-menu-trigger-for]="menu" 
        #menuTrigger="mdMenuTrigger" 
        (mouseenter)="menuTrigger.openMenu()"
        style="margin-right: 25px">
  <md-icon>more_vert</md-icon>Menu 1
</button>

<md-menu #menu="mdMenu">
  <button md-menu-item>
    <md-icon>dialpad</md-icon>
    <span>Redial</span>
  </button>
  <button md-menu-item disabled>
    <md-icon>voicemail</md-icon>
    <span>Check voicemail</span>
  </button>
  <button md-menu-item>
    <md-icon>notifications_off</md-icon>
    <span>Disable alerts</span>
  </button>
</md-menu>

Plunker demo

For your code, it would be:

<button md-button #menuTrigger="mdMenuTrigger" 
                  (mouseenter)="menuTrigger.openMenu()"
                  [mdMenuTriggerFor]="userMenu" 
                  class="nav-btn" >
  <i class="fa fa-user" aria-hidden="true" id="user-icon"></i> 
  NAME
</button>