Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

306
Views
Creating Context Menu in Angular using MatMenu?

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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!