Angular PrimeNG ContextMenu Methods

Last Updated : 24 Apr, 2025

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use ContextMenu Methods in Angular PrimeNG.

The ContextMenu Component displays a menu when right-clicking over any component. Many components provide a special integration with the ContextMenu component. The ContextMenu Component appears similar to the menu that appears when we right-click over any application or desktop screen on a PC.

Angular PrimeNG ContextMenu Methods:

toggle: This method is a mouse event that toggles whether the pop-up menu is visible.
show: It is used to display the popup menu.
hide: It is used to hide the popup menu.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: Below is the example code that illustrates the use of Angular PrimeNG ContextMenu Methods using the toggle Method.

app.component.html:

HTML

<div style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h5>Angular PrimeNG ContextMenu Methods.</h5>
</div>

<p-treeTable
    [value]="gfg1"
    [columns]="selectedColumns"
    dataKey="name"
    [(contextMenuSelection)]="selectedNode"
    [contextMenu]="gf">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
    </ng-template>
    <ng-template
        pTemplate="body"
        let-rowNode
        let-rowData="rowData"
        let-columns="columns">
        <tr [ttContextMenuRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler
                    [rowNode]="rowNode"
                    *ngIf="i == 0"
                ></p-treeTableToggler>
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-treeTable>
<p-contextMenu #gf [model]="gfg2"></p-contextMenu>

app.component.ts:

JavaScript

import { Component } from "@angular/core";
import { NodeService } from "./nodeservice";
import { TreeNode } from "primeng/api";
import { MessageService, MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})

export class AppComponent {
    gfg1: TreeNode[];
    cols: any[];
    selectedColumns: any[];
    gfg2: MenuItem[];
    selectedNode: TreeNode;
    constructor(
        private nodeService: NodeService,
        private messageService: MessageService
    ) {}

    ngOnInit() {
        this.gfg1 = [
            {
                data: {
                    name: "A",
                    age: "40"
                },
                children: [
                    {
                        data: {
                            name: "B",
                            age: "16"
                        }
                    },
                    {
                        data: {
                            name: "C",
                            age: "14"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "D",
                    age: "55"
                },
                children: [
                    {
                        data: {
                            name: "E",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "F",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "G",
                    age: "32"
                },
                children: [
                    {
                        data: {
                            name: "H",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "I",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "J",
                    age: "64"
                },
                children: [
                    {
                        data: {
                            name: "K",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "L",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "M",
                    age: "12"
                },
                children: [
                    {
                        data: {
                            name: "N",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "O",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "P",
                    age: "34"
                },
                children: [
                    {
                        data: {
                            name: "Q",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "R",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "S",
                    age: "43"
                },
                children: [
                    {
                        data: {
                            name: "T",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "U",
                            age: "24"
                        }
                    }
                ]
            }
        ];

        this.cols = [
            { field: "name", header: "First Name" },
            { field: "age", header: "Age" }
        ];

        this.selectedColumns = this.cols;

        this.gfg2 = [
            {
                label: "Expand",
                icon: "pi pi-sort",
                command: (event) => this.toggleGeekFile(this.selectedNode)
            }
        ];
    }

    toggleGeekFile(node) {
        node.expanded = !node.expanded;
        this.gfg1 = [...this.gfg1];
    }
}

app.module.ts:

JavaScript

import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { NodeService } from "./nodeservice";
import { TreeTableModule } from "primeng/treetable";
import { ContextMenuModule } from "primeng/contextmenu";

@NgModule({
    imports: [
        BrowserAnimationsModule,
        TreeTableModule,
        ContextMenuModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService]
})

export class AppModule {}

nodeservice.ts:

JavaScript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
    export class NodeService {
      constructor(private http: HttpClient) {}
}

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG ContextMenu Methods using show and hide Methods.

app.component.html:

HTML

<div style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h5>Angular PrimeNG ContextMenu Methods</h5>
</div>

<p-treeTable
    [value]="gfg1"
    [columns]="selectedColumns"
    dataKey="name"
    [(contextMenuSelection)]="selectedNode"
    [contextMenu]="gf">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template
        pTemplate="body"
        let-rowNode
        let-rowData="rowData"
        let-columns="columns">
        <tr [ttContextMenuRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler
                    [rowNode]="rowNode"
                    *ngIf="i == 0"
                ></p-treeTableToggler>
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-treeTable>
<p-contextMenu #gf [model]="gfg2"></p-contextMenu>
<p-toast [style]="{marginTop: '80px'}"></p-toast>

app.component.ts:

JavaScript

import { Component } from "@angular/core";
import { NodeService } from "./nodeservice";
import { TreeNode } from "primeng/api";
import { MessageService, MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})

export class AppComponent {
    gfg1: TreeNode[];
    cols: any[];
    selectedColumns: any[];
    gfg2: MenuItem[];
    selectedNode: TreeNode;

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.gfg1 = [
            {
                data: {
                    name: "A",
                    age: "40"
                },
                children: [
                    {
                        data: {
                            name: "B",
                            age: "16"
                        }
                    },
                    {
                        data: {
                            name: "C",
                            age: "14"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "D",
                    age: "55"
                },
                children: [
                    {
                        data: {
                            name: "E",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "F",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "G",
                    age: "32"
                },
                children: [
                    {
                        data: {
                            name: "H",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "I",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "J",
                    age: "64"
                },
                children: [
                    {
                        data: {
                            name: "K",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "L",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "M",
                    age: "12"
                },
                children: [
                    {
                        data: {
                            name: "N",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "O",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "P",
                    age: "34"
                },
                children: [
                    {
                        data: {
                            name: "Q",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "R",
                            age: "24"
                        }
                    }
                ]
            },
            {
                data: {
                    name: "S",
                    age: "43"
                },
                children: [
                    {
                        data: {
                            name: "T",
                            age: "20"
                        }
                    },
                    {
                        data: {
                            name: "U",
                            age: "24"
                        }
                    }
                ]
            }
        ];

        this.cols = [
            { field: "name", header: "First Name" },
            { field: "age", header: "Age" }
        ];

        this.selectedColumns = this.cols;

        this.gfg2 = [
            {
                label: "View it Geek",
                icon: "pi pi-search",
                command: (event) => this.viewGeekFile(this.selectedNode)
            }
        ];
    }

    viewGeekFile(node) {
        this.messageService.add({
            severity: "success",
            summary: "Selected Cell is: ",
            detail: node.data.name
        });
    }
}

app.module.ts:

JavaScript

import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { NodeService } from "./nodeservice";
import { TreeTableModule } from "primeng/treetable";
import { ContextMenuModule } from "primeng/contextmenu";
import { ToastModule } from "primeng/toast";

@NgModule({
    imports: [
        BrowserAnimationsModule,
        TreeTableModule,
        ContextMenuModule,
        HttpClientModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService]
})

export class AppModule {}

nodeservice.ts:

JavaScript

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
    export class NodeService {
      constructor(private http: HttpClient) {}
}

Output:

Reference: https://primefaces.org/primeng/table/contextmenu

Angular PrimeNG Tree ContextMenu

yourcontactformsubmitted

Improve

Article Tags :

Angular PrimeNG ContextMenu Methods

Similar Reads

Thank You!

What kind of Experience do you want to share?