Angular PrimeNG Tree ContextMenu
Last Updated :
10 Feb, 2023
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>
|
Javascript
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"
}
];
}
}
|
Javascript
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>
|
Javascript
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
});
}
}
|
Javascript
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
Share your thoughts in the comments
Please Login to comment...