Material Angular 4. Make auto drop down mat-menu

Question

The angular material project provides menu component overview, API and example. I want to improve one automatically dropdown if mouse is over. So my changes are (as it described in material doc):

menu-overview-example.html

<button mat-button [matMenuTriggerFor]="menu" (mouseenter)="someMethod()">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item >User</button>
  <button mat-menu-item >Cards</button>
  <button mat-menu-item >About</button>
</mat-menu>

and correspond ts file is menu-overview-example.ts:

import {Component, ViewChild} from '@angular/core';

import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }

}

Question 1

Is it possible do not implement method in menu-overview-example.ts to handle trigger, but provide correspond method call on menu-overview-example.html? For example (I do not know correct instruction to get access to the event):

<button mat-button-touggle aria-label="Open menu with custom trigger"
   [matMenuTriggerFor]="menu" (mouseenter)="#menu.openMenu()">

Question 2

If my mouse is over menu, it opens - seems good. But I've got side effect my first menu item gets grey color. Is it possible to handle correctly?

More details

The test project is accessible here.

Solution

May be, I am late with answer. Yes, it's possible do not implement method in menu-overview-example.ts for handle trigger. You can create menu only in the html and it open menu on mouseenter and close on mouse leave.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app1';
}

<div id="menu">
  <mat-toolbar color="primary">
      <mat-toolbar-row>
          <span>Application</span>
          <ng-template ngIf="true">
            <button mat-button [matMenuTriggerFor]="menu"
            #matMenuTrigger="matMenuTrigger" 
            (mouseenter)="matMenuTrigger.openMenu()" 
            >Menu</button>
            <mat-menu #menu="matMenu"   [overlapTrigger]="false">
              <div (mouseleave)="matMenuTrigger.closeMenu()">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
                <button mat-menu-item>Item 3</button>
                <button mat-menu-item>Item 4</button>
                <button mat-menu-item>Item 5</button>
              </div>
            </mat-menu>
          </ng-template>
          <ng-template ngIf="true">
            <button mat-button [matMenuTriggerFor]="menu1"
            #matMenuTrigger="matMenuTrigger" 
            (mouseenter)="matMenuTrigger.openMenu()" 
            >Menu1</button>
            <mat-menu #menu1="matMenu"  [overlapTrigger]="false">
              <div (mouseleave)="matMenuTrigger.closeMenu()">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
              </div>
            </mat-menu>
          </ng-template>
          <span class="example-spacer"></span>
          <mat-icon class="example-icon">favorite</mat-icon>
          <mat-icon class="example-icon">delete</mat-icon>
        </mat-toolbar-row>
    </mat-toolbar>
</div>

Comments

[Aaron Lavers]

This method almost works for me, however I'm finding that the close trigger keeps returning "Cannot read property 'closeMenu' of undefined". Have you experienced this, @askeet?

[jgutix]

For adjacent menus the attribute [overlapTrigger]="false" won't work because the items won't show over the menuTrigger element, therefore the mouseleave won't be fired because if the menu is open then the mouseenter event doesn't seem to be triggered on other menuTrigger That's the behavior on Angular/Material 6