hover over menu item -> new menu

[Berndhura]

https://stackoverflow.com/questions/53618333/how-to-open-and-close-angular-mat-menu-on-hover

<ng-container *ngFor="let menuItem of modulesList">

<ng-container *ngIf="!menuItem.children">
    <a class="nav-link">
        <span class="icon fa" [ngClass]="menuItem.icon"></span>
  <span class="text-holder">{{menuItem.label}}</span>
</a>

<ng-container *ngIf="menuItem.children.length > 0"> <button #button mat-button [matMenuTriggerFor]="levelOne" #levelOneTrigger="matMenuTrigger" (mouseenter)="buttonEnter(levelOneTrigger)" (mouseleave)="buttonLeave(levelOneTrigger, button)" style="z-index:1050"> <span class="icon fa" [ngClass]="menuItem.icon"> {{menuItem.label}}

<mat-menu #levelOne="matMenu" direction="down" yPosition="below">
  <span (mouseenter)="menuenter()" (mouseleave)="menuLeave(levelOneTrigger, button)">
  <ng-container *ngFor="let childL1 of menuItem.children">
    <li class="p-0" *ngIf="!childL1.children" mat-menu-item>
      <a class="nav-link">{{childL1.label}}
        <i *ngIf="childL1.icon" [ngClass]="childL1.icon"></i>
      </a>
    </li>
    <ng-container *ngIf="childL1.children && childL1.children.length > 0">
      <li mat-menu-item #levelTwoTrigger="matMenuTrigger" [matMenuTriggerFor]="levelTwo">
        <span class="icon fa" [ngClass]="childL1.icon"></span>
        <span>{{childL1.label}}</span>
      </li>

      <mat-menu #levelTwo="matMenu">
        <span (mouseenter)="menu2enter()" (mouseleave)="menu2Leave(levelOneTrigger,levelTwoTrigger, button)">
        <ng-container *ngFor="let childL2 of childL1.children">
          <li class="p-0" mat-menu-item>
            <a class="nav-link">{{childL2.label}}
              <i *ngIf="childL2.icon" [ngClass]="childL2.icon"></i>
            </a>
          </li>
        </ng-container>
        </span>
      </mat-menu>
    </ng-container>
  </ng-container>
  </span>
</mat-menu>

[Berndhura]

import { Component, Renderer2 } from '@angular/core'; import { ModulesList } from './menu';

/**

• @title Nested menu */ @Component({ selector: 'nested-menu-example', templateUrl: 'nested-menu-example.html' }) export class NestedMenuExample { modulesList: Array; enteredButton = false; isMatMenuOpen = false; isMatMenu2Open = false; prevButtonTrigger;

  constructor(private ren: Renderer2) { this.modulesList = ModulesList; }

  menuenter() { this.isMatMenuOpen = true; if (this.isMatMenu2Open) { this.isMatMenu2Open = false; } }

  menuLeave(trigger, button) { setTimeout(() => { if (!this.isMatMenu2Open && !this.enteredButton) { this.isMatMenuOpen = false; trigger.closeMenu(); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused'); } else { this.isMatMenuOpen = false; } }, 80) }

  menu2enter() { this.isMatMenu2Open = true; }

  menu2Leave(trigger1, trigger2, button) { setTimeout(() => { if (this.isMatMenu2Open) { trigger1.closeMenu(); this.isMatMenuOpen = false; this.isMatMenu2Open = false; this.enteredButton = false; this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused'); } else { this.isMatMenu2Open = false; trigger2.closeMenu(); } }, 100) }

  buttonEnter(trigger) { setTimeout(() => { if(this.prevButtonTrigger && this.prevButtonTrigger != trigger){ this.prevButtonTrigger.closeMenu(); this.prevButtonTrigger = trigger; this.isMatMenuOpen = false; this.isMatMenu2Open = false; trigger.openMenu(); this.ren.removeClass(trigger.menu.items.first['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(trigger.menu.items.first['_elementRef'].nativeElement, 'cdk-program-focused'); } else if (!this.isMatMenuOpen) { this.enteredButton = true; this.prevButtonTrigger = trigger trigger.openMenu(); this.ren.removeClass(trigger.menu.items.first['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(trigger.menu.items.first['_elementRef'].nativeElement, 'cdk-program-focused'); } else { this.enteredButton = true; this.prevButtonTrigger = trigger } }) }

  buttonLeave(trigger, button) { setTimeout(() => { if (this.enteredButton && !this.isMatMenuOpen) { trigger.closeMenu(); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused'); } if (!this.isMatMenuOpen) { trigger.closeMenu(); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-focused'); this.ren.removeClass(button['_elementRef'].nativeElement, 'cdk-program-focused'); } else { this.enteredButton = false; } }, 100) } }