I am trying to create a context menu that triggers every time you click on the node of a tree (in mat-tree-node) with options of select/deselect. I was using mat menu and this is what I did so far.
<p *ngIf="node.type=='assembly' || node.type=='part'" style="display: inline;"
(contextmenu)="asmStateServ.onContextMenu($event, node.guid)">{{node.instanceName}}
({{node.name}})</p>
<mat-menu #contextMenu="matMenu">
<ng-template matMenuContent let-node="node.guid">
<button mat-menu-item (click)="asmStateServ.onContextMenuSelection(node.guid)">Action 1</button>
<button mat-menu-item (click)="asmStateServ.onContextMenuDeselection(node.guid)">Action 2</button>
</ng-template>
</mat-menu>
And for the typescript file, this is what I did.
@ViewChild(MatMenuTrigger)
contextMenu: MatMenuTrigger;
contextMenuPosition = { x: '0px', y: '0px' };
public onContextMenu(event: MouseEvent, node: asmTreeNodeFlat) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.contextMenu.menuData = { 'node': node };
this.contextMenu.menu.focusFirstItem('mouse');
this.contextMenu.openMenu();
}
public onContextMenuSelection(item: asmTreeNodeFlat) {
alert(`Selection for ${item.guid}`);
}
public onContextMenuDeselection(item: asmTreeNodeFlat) {
alert(`For unselecting ${item.guid}`);
}
The asmTreeNodeFlat is a structure like this:
export class asmTreeNodeFlat {
name: string;
instanceName: string;
guid: string;
componentId: number;
url: string;
transform: any = [];
data: any;
level: number;
expandable: boolean;
type: string;
decimation: number = 0;
showInTreeView: boolean = true;
expanded: boolean = false;
}
Although the default context menu has been blocked, the custom context menu is not getting triggered. I was wondering what might be the issue and if you guys can type the proper code in the answer. I apologise, it's just that I am very new in web development.