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. In this article, we are going to learn the Angular PrimeNG ContextMenu Events.
The ContextMenu component displays a menu when right-clicking over any component. Many components provide a special integration with the ContextMenu component. The ContextMenu events are used to track the interactions with the component.
Angular PrimeNG ContextMenu Events:
- onShow: This event is called when the context menu appears.
- onHide: This event is called when the context menu is closed.
Syntax:
<p-contextMenu
#menu
[target]="..."
[model]="..."
(onShow)="handleShow($event)">
</p-contextMenu>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like the following:
Steps to run the application: Run the below command to see the output
ng serve --open
Example 1: Below is the example code that illustrates the use of Angular PrimeNG ContextMenu Events. In the following example, we have shown a toast when we open the context menu.
app.component.html:
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG ContextMenu Events</h3>
<p-toast position="top-center"></p-toast>
<img
#img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png"
alt="Logo"
aria-haspopup="true"
/>
<p-contextMenu
#menu
[target]="img"
[model]="items"
(onShow)="handleShow($event)"
></p-contextMenu>
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
items: MenuItem[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.items = [
{
label: "Visit Website",
icon: "pi pi-fw pi-globe"
},
{
label: "Like",
icon: "pi pi-fw pi-thumbs-up-fill"
},
{
label: "More",
icon: "pi pi-fw pi-folder",
items: [
{
label: "New",
icon: "pi pi-fw pi-plus"
},
{
label: "Share",
icon: "pi pi-fw pi-share-alt"
},
{
label: "Search",
icon: "pi pi-fw pi-search"
}
]
},
{
separator: true
},
{
label: "Quit",
icon: "pi pi-fw pi-power-off"
}
];
}
handleShow(event) {
this.messageService.add({
severity: "success",
summary: "ContextMenu onShow",
detail: "Welcome to GeeksforGeeks"
});
}
}
app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ContextMenuModule } from "primeng/contextmenu";
import { ToastModule } from "primeng/toast";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ContextMenuModule,
ButtonModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Output:
Example 2: Below is another example code that illustrates the use of Angular PrimeNG ContextMenu Events. In the following example, we will show a toast when the context menu is closed.
app.component.html:
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG ContextMenu Events</h3>
<p-toast position="top-center"></p-toast>
<img
#img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png"
alt="Logo"
aria-haspopup="true"
/>
<p-contextMenu
#menu
[target]="img"
[model]="items"
(onShow)="handleShow($event)"
(onHide)="handleHide($event)"
></p-contextMenu>
app.component.ts:
import { Component, ViewChild } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
items: MenuItem[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.items = [
{
label: "Visit Website",
icon: "pi pi-fw pi-globe"
},
{
label: "Like",
icon: "pi pi-fw pi-thumbs-up-fill"
},
{
label: "More",
icon: "pi pi-fw pi-folder",
items: [
{
label: "New",
icon: "pi pi-fw pi-plus"
},
{
label: "Share",
icon: "pi pi-fw pi-share-alt"
},
{
label: "Search",
icon: "pi pi-fw pi-search"
}
]
},
{
separator: true
},
{
label: "Quit",
icon: "pi pi-fw pi-power-off"
}
];
}
handleShow(event) {
this.messageService.add({
severity: "success",
summary: "ContextMenu onShow",
detail: "Welcome to GeeksforGeeks"
});
}
handleHide(event) {
this.messageService.add({
severity: "error",
summary: "ContextMenu onHide",
detail: "Welcome to GeeksforGeeks"
});
}
}
app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ContextMenuModule } from "primeng/contextmenu";
import { ToastModule } from "primeng/toast";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ContextMenuModule,
ButtonModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Output:
Reference: http://primefaces.org/primeng/contextmenu
