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!
Try to set your condition not on [matMenuTriggerFor], but on (mouseenter) event like that:
[matMenuTriggerFor]="rejectionDetails"
(mouseenter) = "comp.RejectionDetails ? trigger.openMenu() : null"
After spending 2-3 hours on this, the most easiest workaround I found for this problem is,
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>
now put a condition on your "matMenuTriggerFor" like this:
[matMenuTriggerFor]="your-boolean-condition? your-normal-menu: fake-menu"
On CSS just write
::ng-deep {.fake-menu { display: none; } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.