title: How to make Material Design Menu (mat-menu) hide on mouseleave
body: <p>I succeeded in making the menu appear on <code>mouseenter</code>. What I want to do now is make it disappear on the <code>mouseleave</code> event of the menu itself. Any ideas on how to make this possible? </p>
  
  <pre><code>    &lt;button mat-button [mat-menu-trigger-for]="menu" 
       #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()"&gt;
          TRIGGER BUTTON
      &lt;/button&gt;
      &lt;mat-menu #menu="matMenu" [overlapTrigger]="false" 
       (mouseleave)="menuTrigger.closeMenu()"&gt;
           &lt;button mat-menu-item [routerLink]="['sources']"&gt;
                &lt;mat-icon&gt;view_headline&lt;/mat-icon&gt;
                MENU CHOICE
          &lt;/button&gt;
      &lt;/mat-menu&gt;
  </code></pre>