Skip to main content

Item Action Template

Overview​

The ngxItemActionTemplate directive is a type-safe helper for Angular templates. It does not add any runtime logic — instead, it allows Angular's type system to correctly infer the $implicit variable type inside an ng-template that represents an item action.

This improves developer experience by enabling autocompletion and type checking when working with item actions.

Import​

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

Selector​

ngxItemActionTemplate

API Reference​

Type Parameters​

NameDescription
TActionId extends string = DefaultItemActionTypeDefines the type of the action identifier. Defaults to DefaultItemActionType.

Inputs​

NameTypeDefaultDescription
ngxItemActionTemplateItemAction<TActionId>-The list of item actions made available to the template.

Template Context​

Within the ng-template, Angular will infer the following context type:

interface ItemActionTemplateContext<TActionId extends string> {
  $implicit: ItemAction<TActionId>;
}

Example​


<div
  [ngxDragDropZone]="item"
  [allowedItems]="allowedItems"
  ngxHoverIndicator
  ngxDropIndicator
  ngxActionMenu
  [actionButtons]="actions"
  [settingsButtonTemplate]="actionButton"
  (actionTriggered)="onAction($event)">
  <div>item</div>
</div>

<ng-template
  #actionButton
  ngxBuilderBlockActionTemplate
  [ngxBuilderBlockActionTemplate]="actions"
  let-action
>
  <button>{{ action.label }}</button>
</ng-template>

See Also​