Angular PrimeNG Tree 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.
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.
- app.component.html:
HTML
< h1 style = "color: green; text-align: center;" > w3wiki </ h1 > < h3 >Angular PrimeNG Tree ContextMenu</ h3 > < p-tree [value]="gfg1" selectionMode = "single" [(selection)]="selectedFile" [contextMenu]="gfg"> < ng-template pTemplate = "header" > < h3 >w3wiki</ h3 > </ ng-template > </ p-tree > < p-contextMenu #gfg [model]="gfg2"></ p-contextMenu > |
- app.component.ts:
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" } ]; } } |
- app.module.ts:
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.
- app.component.html:
HTML
< h1 style = "color: green; text-align: center;" > w3wiki </ h1 > < h3 >Angular PrimeNG Tree ContextMenu</ h3 > < p-tree [value]="gfg1" selectionMode = "single" [(selection)]="selectedFile" [contextMenu]="gfg"> < ng-template pTemplate = "header" > < h3 >w3wiki</ h3 > </ ng-template > </ p-tree > < p-contextMenu #gfg [model]="gfg2"></ p-contextMenu > < p-toast ></ p-toast > |
- app.component.ts:
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 .selectBeginner( this .selectedFile) }, { label: "Reject" , command: (event) => this .unselectBeginner( this .selectedFile) } ]; } selectBeginner(file: TreeNode) { this .messageService.add({ severity: "success" , summary: "Congrats! Node Selected" , detail: file.label }); } unselectBeginner(file: TreeNode) { this .messageService.add({ severity: "error" , summary: "Oop's! Node Rejected" , detail: file.label }); } } |
- app.module.ts:
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
Contact Us