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:

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:

Javascript

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:

Javascript

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:

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:

Javascript

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:

Javascript

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