Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

136
Vistas
Context Menu appears by right clicking on specific node of a tree (Angular)

I have been 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 the functionalities of which would just highlight node in bold. 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;
}

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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda