@MarzSocks not allowed to comment. I used the solution of @Vince
import { Directive, HostBinding, Input } from '@angular/core';
import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
@Directive({
selector: '[matMenuTriggerForContext]',
host: {
'class': 'mat-mdc-menu-trigger',
'[attr.aria-haspopup]': 'menu ? "menu" : null',
'[attr.aria-expanded]': 'menuOpen',
'[attr.aria-controls]': 'menuOpen ? menu.panelId : null',
'(contextmenu)': '_handleContextMenu($event)',
},
exportAs: 'matMenuTriggerContext'
})
export class MatMenuTriggerForContextDirective extends MatMenuTrigger {
@Input('matMenuTriggerForContext')
get _matMenuTriggerForContext(): MatMenuPanel | null {
return this.menu;
}
set _matMenuTriggerForContext(v: MatMenuPanel | null) {
this.menu = v;
}
_handleContextMenu($event: MouseEvent): boolean {
$event?.stopPropagation();
$event?.preventDefault();
$event?.stopImmediatePropagation();
this._handleClick($event);
return false;
}
}
and added
/** Handles click events on the trigger. */
override _handleClick(event: MouseEvent): void {
if (event.button !== 2) {
return;
}
if (this.triggersSubmenu()) {
// Stop event propagation to avoid closing the parent menu.
event.stopPropagation();
this.openMenu();
} else {
this.toggleMenu();
}
}
to filter for right click (event.button == 2) This works, maybe some more changes are needed for perfectly user experience