Angular PrimeNG Tree ContextMenu
Last Updated :
28 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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
Tree ContextMenu: The tree has exclusive integration with the context menu created by binding a menu instance to the tree.
Syntax:
<p-tree
[value]="..."
selectionMode="..."
[(selection)]="..."
[contextMenu]="...">
<ng-template pTemplate="header">
......
</ng-template>
</p-tree>
<p-contextMenu #gfg [model]="..."></p-contextMenu>
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 above file: Run the below command
ng serve --save
Example 1: This example describes the basic usage of the Tree ContextMenu in Angular PrimeNG.
HTML
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree ContextMenu</h3>
<p-tree
[value]="gfg1"
selectionMode="single"
[(selection)]="selectedFile"
[contextMenu]="gfg">
<ng-template pTemplate="header">
<h3>GeeksforGeeks</h3>
</ng-template>
</p-tree>
<p-contextMenu #gfg [model]="gfg2"></p-contextMenu>
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { MenuItem, TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
gfg1: TreeNode[];
selectedFile: TreeNode;
gfg2: MenuItem[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.gfg1 = [
{
label: "Data Structures",
icon: "pi pi-folder",
children: [
{
label: "List",
icon: "pi pi-folder",
children: [
{
label: "Singly List",
icon: "pi pi-code"
},
{
label: "Doubly List",
icon: "pi pi-code"
},
{
label: "Circularly List",
icon: "pi pi-code"
}
]
},
{
label: "Queue",
icon: "pi pi-folder",
children: [
{
label: "Simple Queue",
icon: "pi pi-code"
},
{
label: "Doubly ended Queue",
icon: "pi pi-code"
}
]
}
]
},
{
label: "Algorithms",
icon: "pi pi-folder",
children: [
{
label: "Greedy ",
icon: "pi pi-code"
},
{
label: "BFS ",
icon: "pi pi-code"
},
{
label: "Dynamic Programming",
icon: "pi pi-code"
}
]
}
];
this.gfg2 = [
{
label: "Select"
},
{
label: "Reject"
}
];
}
}
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import {TreeModule} from 'primeng/tree';
import {ContextMenuModule} from 'primeng/contextmenu';
@NgModule({
imports: [
BrowserAnimationsModule,
TreeModule,
ContextMenuModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [NodeService]
})
export class AppModule { }
Output:
Example 2: Below is another example that describes the usage of the Tree ContextMenu in Angular PrimeNG using the toast messages.
HTML
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree ContextMenu</h3>
<p-tree
[value]="gfg1"
selectionMode="single"
[(selection)]="selectedFile"
[contextMenu]="gfg">
<ng-template pTemplate="header">
<h3>GeeksforGeeks</h3>
</ng-template>
</p-tree>
<p-contextMenu #gfg [model]="gfg2"></p-contextMenu>
<p-toast></p-toast>
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { MenuItem, TreeNode } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
gfg1: TreeNode[];
selectedFile: TreeNode;
gfg2: MenuItem[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.gfg1 = [
{
label: "Data Structures",
icon: "pi pi-folder",
children: [
{
label: "List",
icon: "pi pi-folder",
children: [
{
label: "Singly List",
icon: "pi pi-code"
},
{
label: "Doubly List",
icon: "pi pi-code"
},
{
label: "Circularly List",
icon: "pi pi-code"
}
]
},
{
label: "Queue",
icon: "pi pi-folder",
children: [
{
label: "Simple Queue",
icon: "pi pi-code"
},
{
label: "Doubly ended Queue",
icon: "pi pi-code"
}
]
}
]
},
{
label: "Algorithms",
icon: "pi pi-folder",
children: [
{
label: "Greedy ",
icon: "pi pi-code"
},
{
label: "BFS ",
icon: "pi pi-code"
},
{
label: "Dynamic Programming",
icon: "pi pi-code"
}
]
}
];
this.gfg2 = [
{
label: "Select",
command: (event) => this.selectGeeks(this.selectedFile)
},
{
label: "Reject",
command: (event) => this.unselectGeeks(this.selectedFile)
}
];
}
selectGeeks(file: TreeNode) {
this.messageService.add({
severity: "success",
summary: "Congrats! Node Selected",
detail: file.label
});
}
unselectGeeks(file: TreeNode) {
this.messageService.add({
severity: "error",
summary: "Oop's! Node Rejected",
detail: file.label
});
}
}
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import {TreeModule} from 'primeng/tree';
import {ToastModule} from 'primeng/toast';
import {ContextMenuModule} from 'primeng/contextmenu';
@NgModule({
imports: [
BrowserAnimationsModule,
TreeModule,
ToastModule,
ContextMenuModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [NodeService]
})
export class AppModule { }
Output:
Reference: https://primefaces.org/primeng/tree/contextmenu
Similar Reads
Angular PrimeNG TreeTable ContextMenu
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
7 min read
Angular PrimeNG Table ContextMenu
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
6 min read
Angular PrimeNG ContextMenu Properties
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 are going to learn Angular PrimeNG ContextMenu Properties. The ContextMenu comp
4 min read
Angular PrimeNG ContextMenu Styling
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG Tree Component
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
6 min read
Angular PrimeNG ContextMenu Events
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read
Angular PrimeNG ContextMenu Methods
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 Com
6 min read
Angular PrimeNG Tree Events
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. It provides a lot of templates, components, theme designs, an extensive icon library, and much more.
5 min read
Angular PrimeNG Menu Component
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 the Menu component in Angular PrimeNG. We will also learn a
4 min read
Angular PrimeNG ContextMenu Component
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. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
4 min read