How to show and hide Mat-menu on mouseover and mouseout using angular 6

Question

https://stackblitz.com/edit/angular-material-hello-zhqyiy?file=app%2Fhome%2Fhome%2Fhome.component.html

I am using angular 6 with material design, I wanted to show & hide, Mat-Menu on Mouse over and Mouse Out , I am able to show menu on mouse Over,But not able to hide on mouse Out

(mouseleave)="createPlanmenuTrigger.closeMenu()"

this is the mouseout event i am using .let me know where i made wrong

Answer 1

Here is working html

  <ul class="navbar-nav mr-auto">

    <li class="nav-item" routerLinkActive="active" >
      <a class="nav-link" #createPlanmenuTrigger="matMenuTrigger" 
      [matMenuTriggerFor]="createPlan" #matMenuTrigger="matMenuTrigger" 
      (mouseenter)="matMenuTrigger.openMenu()">Create Plan</a>
       <mat-menu #createPlan="matMenu">
       <div (mouseleave)="matMenuTrigger.closeMenu()">
          <button mat-menu-item [routerLink]="['/plan/manual-plan']">Manual 
         Plan</button>
        <button mat-menu-item [routerLink]="['/plan/create-plan']">Upload 
         Plan</button>
        <button mat-menu-item [routerLink]="['/plan/pending-plans']">Pending 
         Plans</button>
      </div>
      </mat-menu>

   </li>



    <li class="nav-item" routerLinkActive="active" >
      <a class="nav-link" #dispatchPlanmenuTrigger="matMenuTrigger" 
       [matMenuTriggerFor]="dispatchPlan"  #matMenuTrigger2="matMenuTrigger" 
       (mouseenter)="matMenuTrigger2.openMenu()">Dispatch Plan</a>
       <mat-menu #dispatchPlan="matMenu">
      <div (mouseleave)="matMenuTrigger2.closeMenu()">
        <button mat-menu-item [routerLink]="['/dispatch-plan/view-plan']">View 
       Plans</button>
        <button mat-menu-item [routerLink]="['/dispatch-plan/modifiy-plan']">Modify 
       Plans</button>
        <button mat-menu-item [routerLink]="['/dispatch-plan/approve-plans']">Approve 
       Plans</button>
       </div>
      </mat-menu>
     </li>

     <!-- <li class="nav-item">
      <a class="nav-link">Plant Status</a>

     </li>
     <li class="nav-item">
      <a class="nav-link">Tracking</a>
     </li> -->
</ul>

use on a tag #matMenuTrigger="matMenuTrigger" (mouseenter)="matMenuTrigger.openMenu()"

and wrap buttons in div tag and add to div (mouseleave)="matMenuTrigger.closeMenu()"

Hope it will work as you intended.