Skip to main content

Abstract Item Actions

For advanced usage:

This directive is mainly for advanced customization. If you're not extending the builder's internal behavior, use ActionMenuDirective instead.

Overview​

The AbstractItemActionsDirective provides core logic for managing hover interactions and double-click selection for items. It must be extended by a custom directive to implement showComponent() and hideComponent() methods.

Required Directives

AbstractItemActionsDirective 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​

AbstractItemActionsDirective

API Reference​

Inputs​

NameDefaultDescription
disabledDbClick: booleanfalseIf true, disables the double-click listener that selects the item. Accepts boolean or string ("false" / "true").

Example​

import { Directive } from '@angular/core';
import { AbstractItemActionsDirective } from 'ngx-builder-dnd';

@Directive({
  selector: '[appCustomItemAction]',
})
export class CustomItemActionDirective extends AbstractItemActionsDirective {
  protected showComponent(): void {
    console.log('Show custom action UI');
  }

  protected hideComponent(): void {
    console.log('Hide custom action UI');
  }
}
Note

For a real-world implementation, see ActionMenuDirective, which extends this base directive with full UI and interaction logic.

See Also​