Skip to main content

Item Actions

Internal usage

This component is primarily used inside the library. You usually won't need to reference it directly in your code.

Overview​

The ItemActionsComponent renders contextual action buttons for the items with the directives: DropZoneDirective and DragDropZoneDirective, including a drag handle and an optional settings menu. It supports projecting custom templates for drag, settings, and action buttons.

Import​

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

Selector​

ngx-item-actions

API Reference​

Type Parameters​

NameDescription
TActionId extends stringThe action ID type used for buttons. Extendable via string unions.

Inputs​

NameDefaultDescription
show: booleanfalseControls whether the action buttons wrapper is visible.
inlineActionsInput: booleanfalseIf true, renders the action buttons inline.
showDragHandle: booleantrueToggles the visibility of the drag handle button.
showSettingsButton: booleantrueToggles the visibility of the settings menu button.
actionButtons: ItemAction<TActionId>[]-Array of action definitions for the settings menu.
dragButtonTemplate: TemplateRef<any>-Optional custom template for the drag button.
settingsButtonTemplate: TemplateRef<any>-Optional custom template for the settings button.
actionButtonTemplate: TemplateRef<ItemActionTemplateContext<TActionId>>-Optional custom template for menu action buttons.

Outputs​

NameDescription
actionTriggered: EventEmitter<TActionId>Emits the ID of the action button clicked by the user.

Examples​

Drag Handle Only​

<ngx-item-actions
  [show]="true"
  [showDragHandle]="true"
  [showSettingsButton]="false">
</ngx-item-actions>

Settings Menu with Action Buttons​

<ngx-item-actions
  [show]="true"
  [actionButtons]="[{ id: 'edit', icon: 'edit', tooltip: 'Edit', ariaLabel: 'Edit item' }]"
  [showDragHandle]="false"
  [showSettingsButton]="true">
</ngx-item-actions>

Using Custom Templates​

<ngx-item-actions
  [show]="true"
  [dragButtonTemplate]="customDragTemplate"
  [settingsButtonTemplate]="customSettingsTemplate"
  [actionButtonTemplate]="customActionTemplate"
  [actionButtons]="actionList">
</ngx-item-actions>

See Also​