Action Menu

Overview

The ActionMenuDirective provides a ready-to-use UI for item actions such as edit, clone, or delete. It offers flexible customization while remaining simple to set up, letting you control the visibility, templates, and behavior of item actions.

This directive extends AbstractItemActionsDirective and integrates with the following required directives:

Required Directives

ActionMenuDirective must be used on an element that has one of the following directives, otherwise it will throw an error:

Import

import { DndModule } from 'ngx-builder-dnd';

Selector

ngxActionMenu

API Reference

Type Parameters

Name	Description
`TActionId extends string = DefaultItemActionType`	The action ID type used for buttons and the `actionTriggered` output. Extendable via string unions.

Inputs

Name	Default	Description
`inlineActionsInput: boolean`	`true`	If `true`, renders actions inline with the item container. Accepts boolean or string.
`restrictDragToHandle: boolean`	`false`	Restricts dragging to the handle element when `true`.
`showDragHandle: boolean`	`true`	Toggles visibility of the drag handle.
`showSettingsButton: boolean`	`true`	Toggles visibility of the settings (⋮) button.
`actionButtons: defaultItemActions[]`	`defaultItemActions`	Array of item action definitions to render in the menu.
`dragButtonTemplate: TemplateRef<any>`	-	Custom template for the drag handle button.
`settingsButtonTemplate: TemplateRef<any>`	-	Custom template for the settings button.
`actionButtonTemplate: TemplateRef<ItemActionTemplateContext<TActionId>>`	-	Custom template for each action button (inside the menu).

Outputs

Name	Description
`actionTriggered: EventEmitter<TActionId>`	Emits the action ID when an item action is triggered, passing its ID.

Types

Default Actions
Custom Actions

export const defaultActions: ItemAction<DefaultActionType>[] = [
  { id: 'edit', icon: 'edit', tooltip: 'Edit', ariaLabel: 'Edit Item' },
  { id: 'clone', icon: 'content_copy', tooltip: 'Clone', ariaLabel: 'Clone Item' },
  { id: 'delete', icon: 'delete', tooltip: 'Delete', ariaLabel: 'Delete Item' },
];

const myActions: ItemAction<'share' | 'download'>[] = [
  { id: 'share', icon: 'share', tooltip: 'Share', ariaLabel: 'Share Item' },
  { id: 'download', icon: 'download', tooltip: 'Download', ariaLabel: 'Download Item' },
];

Example

<!-- Minimal usage of ActionMenuDirective -->
<div
  [ngxDragDropZone]="item"
  ngxHoverIndicator
  ngxActionMenu
>
  Item with actions
</div>

Note

For advanced use cases, you can provide custom actionButtons or templates (dragButtonTemplate, settingsButtonTemplate, actionButtonTemplate) to fully control the item actions UI.

Overview​

Import​

Selector​

API Reference​

Type Parameters​

Inputs​

Outputs​

Types​

Example​

See Also​