Angular Material - displaying Mat-Menu on mouse-over only when condition is true

1
votes

quick question. I want to trigger Mat-menu on mouse over div element with header of my component, but only when some specific condition is set to true.

I have something like this:

<div class="card-header"
     [matMenuTriggerFor]="comp.RejectionDetails ? rejectionDetails : null" 
     #trigger="matMenuTrigger" (mouseenter)="trigger.openMenu()" 
     (mouseleave)="trigger.closeMenu()">
  <mat-menu #rejectionDetails [class]="'mat-menu-component'"
            [hasBackdrop]="false">
      <ng-template matMenuContent>
           <div>TEST</div>
      </ng-template>
  </mat-menu>

It's seems to work as expected but in console it's throwing error:

UniversalDynamicComponent.html:10 ERROR Error: matMenuTriggerFor: must pass in an mat-menu instance.

Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>

I understand that is because of passing null value to directive (when the conidition is false). But I can't figure out other solution for this problem. Maybe someone can help? Thanks!

2
javascriptangularangular-materialmaterial-design

2 Answers

0
votes

Try to set your condition not on [matMenuTriggerFor], but on (mouseenter) event like that:

 [matMenuTriggerFor]="rejectionDetails" 
 (mouseenter) = "comp.RejectionDetails ? trigger.openMenu() : null"
0
votes

After spending 2-3 hours on this, the most easiest workaround I found for this problem is,

  1. Define 2 mat-menu one for your normal behavior and other menu to show nothing. (reason to do this is because "matMenuTriggerFor" cannot be false or null it needs to have a mat-menu object)

    <mat-menu #sub_menu="matMenu">
  <button>menu-button 1</button>
  <button>menu-button 2</button>
</mat-menu>

<mat-menu #fake_menu="matMenu" class="fake-menu"></mat-menu>

  2. now put a condition on your "matMenuTriggerFor" like this:

    [matMenuTriggerFor]="your-boolean-condition ? your-normal-menu : fake-menu"

  3. On CSS just write

     ::ng-deep {
   .fake-menu {
     display: none;
   }
 }