import {ContextMenuModule} from 'primeng/contextmenu';
import {MenuItem} from 'primeng/api';
ContextMenu uses the common menumodel api to define its items, visit MenuModel API for details.
ContextMenu requires nested menuitems as its model and in its simplest form ContextMenu is attached to the document with global setting. .
<p-contextMenu [global]="true" [model]="items"></p-contextMenu>
ContextMenu can be attached to a particular element whose local template variable name is defined using the target property.
<p-contextMenu [target]="img" [model]="items2" ></p-contextMenu>
<img #img src="assets/showcase/images/primeng.svg" alt="Logo">
Some components like DataTable require special attention so they provide a different method to attach a context menu. Refer to individual documentation of components with special integration like DataTable.
export class ContextMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
items: [{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
},
{
label: 'Edit',
icon: 'fa-edit',
items: [
{label: 'Undo', icon: 'fa-mail-forward'},
{label: 'Redo', icon: 'fa-mail-reply'}
]
}
];
}
}
| Name | Type | Default | Description |
|---|---|---|---|
| model | array | null | An array of menuitems. |
| global | boolean | false | Attaches the menu to document instead of a particular item. |
| target | string | null | Local template variable name of the element to attach the context menu. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| appendTo | any | null | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| Name | Parameters | Description |
|---|---|---|
| toggle | event (optional): mouse event | Toggles the visibility of the popup menu. |
| show | event: browser event | Displays the popup menu. |
| hide | - | Hides the popup menu. |
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| ui-contextmenu | Container element. |
| ui-menu-list | List element. |
| ui-menuitem | Menuitem element. |
| ui-menuitem-text | Label of a menuitem. |
| ui-menuitem-icon | Icon of a menuitem. |
| ui-submenu-icon | Arrow icon of a submenu. |
None.
<p-contextMenu [global]="true" [model]="items1"></p-contextMenu>
<p-contextMenu [target]="img" [model]="items2" ></p-contextMenu>
<img #img src="assets/showcase/images/primeng-text.svg" alt="Logo">
export class ContextMenuDemo {
items: MenuItem[];
items2: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'fa-file-o',
items: [{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{separator:true},
{label: 'Quit'}
]
},
{
label: 'Edit',
icon: 'fa-edit',
items: [
{label: 'Undo', icon: 'fa-mail-forward'},
{label: 'Redo', icon: 'fa-mail-reply'}
]
},
{
label: 'Help',
icon: 'fa-question',
items: [
{
label: 'Contents'
},
{
label: 'Search',
icon: 'fa-search',
items: [
{
label: 'Text',
items: [
{
label: 'Workspace'
}
]
},
{
label: 'File'
}
]}
]
},
{
label: 'Actions',
icon: 'fa-gear',
items: [
{
label: 'Edit',
icon: 'fa-refresh',
items: [
{label: 'Save', icon: 'fa-save'},
{label: 'Update', icon: 'fa-save'},
]
},
{
label: 'Other',
icon: 'fa-phone',
items: [
{label: 'Delete', icon: 'fa-minus'}
]
}
]
},
{separator:true},
{
label: 'Quit', icon: 'fa-minus'
}
];
this.items2 = [
{
label: 'Next',
icon: 'fa-chevron-right'
},
{
label: 'Prev',
icon: 'fa-chevron-left'
}
];
}
}