Angular PrimeNG ContextMenu Styling

Last Updated : 26 Dec, 2022

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 Styling.

The ContextMenu component displays a menu when right-clicking over any component. Many components provide a special integration with the ContextMenu component. The ContextMenu styling allows us to override the default styles by using the component style classes.

Angular PrimeNG ContextMenu Styling:

p-contextmenu: It is the container element.
p-menu-list: It is the list element.
p-menuitem: It is the Menuitem element.
p-menuitem-text: It is the label of a menuitem.
p-menuitem-icon: It is the icon of a menuitem.
p-submenu-icon: It is the arrow icon of a submenu.

Syntax:

:host ::ng-deep .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 above file: Run the below command

ng serve --save

Example 1: Below is the example code that illustrates the use of Angular PrimeNG ContextMenu Styling. In the following example, we have a border around the context menu.

app.component.html:

HTML

<h1 style="color: green; text-align: center;"> 
    GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG ContextMenu Styling</h3> 
  
<img
    #img alt="Logo" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png"    
    aria-haspopup="true"
/> 
<p-contextMenu #menu [target]="img"  
            [model]="gfg"></p-contextMenu>

app.component.css:

CSS

:host ::ng-deep .p-contextmenu { 
    border: 4px solid green; 
}

app.component.ts:

Javascript

import { Component } from "@angular/core"; 
import { MenuItem } from "primeng/api"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 
  
export class AppComponent { 
    gfg: MenuItem[]; 
  
    ngOnInit() { 
        this.gfg = [ 
            { 
                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"
            } 
        ]; 
    } 
}

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 { ContextMenuModule } from "primeng/contextmenu"; 
  
@NgModule({ 
    imports: [ 
        BrowserModule,  
        BrowserAnimationsModule,  
        ContextMenuModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}

Output:

Example 2: Below is another example code that illustrates the use of the Angular PrimeNG ContextMenu Styling. In the following example, we have a box shadow around the context menu.

app.component.html:

HTML

<h1 style="color: green; text-align:center;"> 
  GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG ContextMenu Styling</h3> 
  
<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"></p-contextMenu> 

app.component.css:

CSS

:host ::ng-deep .p-contextmenu { 
    box-shadow: 10px 10px 5px #2ec700; 
} 

app.component.ts:

Javascript

import { Component, ViewChild } from "@angular/core"; 
import { MenuItem, MessageService } from "primeng/api"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 
  
export class AppComponent { 
    gfg: MenuItem[]; 
  
    ngOnInit() { 
        this.gfg = [ 
            { 
                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"
            } 
        ]; 
    } 
}

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 { ContextMenuModule } from "primeng/contextmenu"; 
  
@NgModule({ 
    imports: [ 
        BrowserModule,  
        BrowserAnimationsModule,  
        ContextMenuModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}