CODEWITHSUNDEEP
angularangular-material2
ofir fridman
ofir fridman

Reputation: 2789

Angular Material 2 How to close md-menu on mouseleave

I am using Angular Material 2 to create a menu with md-menu component. I want to close menu on mouse leave. Can anyone point me in the right direction?

Upvotes: 0

Views: 5399

Answers (3)

Augie Gardner
Augie Gardner

Reputation: 2775

Add this to your global Angular styles. (.scss)

.mat-menu-panel {
  &.mouseleave {
    .mat-menu-content {
      padding: 0;
      > div {
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }
  }
}

Add this to your component class:

  @ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;

...

  closeMenu() {
    this.menuTrigger.closeMenu();
  }

Create an HTML menu like this: (Add the class "mouseleave" to your mat-menu element.)

  <mat-menu class="mouseleave" #menu="matMenu">
    <div (mouseleave)="closeMenu()">
      <button mat-menu-item>1</button>
      <button mat-menu-item>2</button>
      <button mat-menu-item>3</button>
      <button mat-menu-item>4</button>
    </div>
  </mat-menu>

Upvotes: 3

Leo
Leo

Reputation: 94

You can use closeMenu() from the MaterialMenuTigger but it will not work if you put is just on the menu. If you wrapp a span around all buttons and add (mouseleave) to the spann it will work.

My solution for the problem was. 

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu" >
  <span (mouseleave)="trigger.closeMenu()>
    <button md-menu-item>Item 1</button>
    <button md-menu-item>Item 2</button>
  </span>
</md-menu>
<button mat-button [matMenuTriggerFor]="menu" #trigger="matMenuTrigger">Menu</button>

Upvotes: 4

TheUnreal
TheUnreal

Reputation: 24462

You can take leverage of the closeMenu() method from the Material Menu API and execute it on mouse leave as follows:

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu" (mouseleave)="menu.closeMenu()">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

Should work.

Upvotes: 0

Related Questions