@ng-dnd/core documentation
  1. Injectables
  2. DndService

File

src/connector.ts

Description

For a simple component, unsubscribing is as easy as connection.unsubscribe() in ngOnDestroy() If your components have lots of subscriptions, it can get tedious having to unsubscribe from all of them, and you might forget. A common pattern is to create an RxJS Subscription (maybe called destroy), to use this.destroy.add(xxx.subscribe(...)) and to call destroy.unsubscribe() once to clean up all of them. @ng-dnd/core supports this pattern with by using the subscription parameter on the constructors. Simply:

Example :
import { Subscription } from 'rxjs';
// ...
destroy = new Subscription();
target = this.dnd.dropTarget({
  // ...
}, this.destroy);
ngOnDestroy() { this.destroy.unsubscribe(); }

It is a good habit for avoiding leaked subscriptions, because .

Index

Methods

Methods

Public dragLayer
dragLayer(subscription?: AddSubscription)
Type parameters :
  • Item

This method creates a DragLayer object

Parameters :
Name Type Optional
subscription AddSubscription Yes
Returns : DragLayer<Item>
Public dragSource
dragSource(type: string | symbol | null, spec: DragSourceSpec<Item | DropResult>, subscription?: AddSubscription)
Type parameters :
  • Item
  • DropResult

This method creates a DragSource object. It represents a drag source and its behaviour, and can be connected to a DOM element by assigning it to the [dragSource] directive on that element in your template.

It is the corollary of react-dnd's DragSource.

The spec argument (DragSourceSpec) is a set of queries and callbacks that are called at appropriate times by the internals. The queries are for asking your component whether to drag/listen and what item data to hoist up; the callback (just 1) is for notifying you when the drag ends.

Only the drop targets registered for the same type will react to the items produced by this drag source. If you want a dynamic type, pass null as the type; and call DragSource in a lifecycle hook.

connection to.

Parameters :
Name Type Optional Description
type string | symbol | null No
spec DragSourceSpec<Item | DropResult> No
subscription AddSubscription Yes

An RxJS Subscription to tie the lifetime of the connection to.
Returns : DragSource<Item, DropResult>
Public dropTarget
dropTarget(types: TypeOrTypeArray | null, spec: DropTargetSpec<Item | DropResult>, subscription?: AddSubscription)
Type parameters :
  • Item
  • DropResult

This drop target will only react to the items produced by the drag sources of the specified type or types.

If you want a dynamic type, pass null as the type; and call DropTarget in a lifecycle hook.

Parameters :
Name Type Optional
types TypeOrTypeArray | null No
spec DropTargetSpec<Item | DropResult> No
subscription AddSubscription Yes
Returns : DropTarget<Item, DropResult>

results matching ""

    No results matching ""