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.
HTML
< h1 style = "color: green; text-align: center;" >
GeeksforGeeks
</ h1 >
< h3 >Angular PrimeNG ContextMenu Styling</ h3 >
< img
#img alt = "Logo" src =
aria-haspopup = "true"
/>
< p-contextMenu #menu [target]="img"
[model]="gfg"></ p-contextMenu >
|
CSS
:host ::ng-deep .p-contextmenu {
border : 4px solid green ;
}
|
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"
}
];
}
}
|
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.
HTML
< h1 style = "color: green; text-align:center;" >
GeeksforGeeks
</ h1 >
< h3 >Angular PrimeNG ContextMenu Styling</ h3 >
< img #img src =
alt = "Logo" aria-haspopup = "true"
/>
< p-contextMenu #menu [target]="img" [model]="items"></ p-contextMenu >
|
CSS
:host ::ng-deep .p-contextmenu {
box-shadow: 10px 10px 5px #2ec700 ;
}
|
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"
}
];
}
}
|
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:
Â
Reference: http://primefaces.org/primeng/contextmenu
Share your thoughts in the comments
Please Login to comment...