Material Angular 4. Make auto drop down mat-menu

4
votes

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.

1
angularmenuangular-material

1 Answers

4
votes

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>