Skip to main content

Item Action

Overview​

The ItemAction model defines the structure and default values for actions available in directives such as ActionMenuDirective.

ItemAction<TActionId>​

The ItemAction interface represents a single actionable button (like edit, clone, delete) used inside item menus or toolbars.

export interface ItemAction<TActionId> {
  id: TActionId;
  icon: string;
  tooltip: string;
  ariaLabel: string;
}

  • id: Unique identifier of the action, typed by TActionId.

  • icon: Icon name associated with the action (for example, a Material Icon).

  • tooltip: Text displayed when hovering over the action button.

  • ariaLabel: Accessibility label for screen readers, improving accessibility support.

DefaultItemActionType​

export type DefaultItemActionType = 'edit' | 'clone' | 'delete';

This type defines the built-in action IDs used by ActionMenuDirective.

defaultItemActions​

The library provides a default set of actions that can be imported and reused.

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' },
];

Example​

import { defaultItemActions, DefaultItemActionType, ItemAction } from 'ngx-builder-dnd';

@Component({
  selector: 'app-action-example',
  template: `
    <div ngxActionMenu [actionButtons]="actions">My item</div>
  `,
})
export class ActionExampleComponent {
  actions: ItemAction<DefaultItemActionType>[] = defaultItemActions;
}

See Also​