API for drag-drop

API reference for Angular CDK drag-drop

import {DragDropModule} from '@angular/cdk/drag-drop';

Service that allows for drag-and-drop functionality to be attached to DOM elements.

Methods
createDrag

Turns an element into a draggable item.

Parameters

element

HTMLElement | ElementRef<HTMLElement>

Element to which to attach the dragging functionality.

config

DragRefConfig = DEFAULT_CONFIG

Object used to configure the dragging behavior.

Returns
DragRef<T>

createDropList

Turns an element into a drop list.

Parameters

element

HTMLElement | ElementRef<HTMLElement>

Element to which to attach the drop list functionality.

Returns
DropListRef<T>

Container that wraps a set of draggable items.

Selector: [cdkDropList] cdk-drop-list

Exported as: cdkDropList
Properties
Name Description
@Input({ alias: 'cdkDropListAutoScrollDisabled', transform: booleanAttribute })

autoScrollDisabled: boolean

Whether to auto-scroll the view when the user moves their pointer close to the edges.

@Input('cdkDropListAutoScrollStep')

autoScrollStep: NumberInput

Number of pixels to scroll for each frame when auto-scrolling an element.

@Input('cdkDropListConnectedTo')

connectedTo: (CdkDropList | string)[] | CdkDropList | string

Other draggable containers that this container is connected to and into which the container's items can be transferred. Can either be references to other drop containers, or their unique IDs.

@Input('cdkDropListData')

data: T

Arbitrary data to attach to this container.

@Input({ alias: 'cdkDropListDisabled', transform: booleanAttribute })

disabled: boolean

Whether starting a dragging sequence from this container is disabled.

@Input('cdkDropListElementContainer')

elementContainerSelector: string | null

Selector that will be used to resolve an alternate element container for the drop list. Passing an alternate container is useful for the cases where one might not have control over the parent node of the draggable items within the list (e.g. due to content projection). This allows for usages like:

<div cdkDropList cdkDropListElementContainer=".inner">
  <div class="inner">
    <div cdkDrag></div>
  </div>
</div>
@Input('cdkDropListEnterPredicate')

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.

@Input()

id: string

Unique ID for the drop zone. Can be used as a reference in the connectedTo of another CdkDropList.

@Input('cdkDropListLockAxis')

lockAxis: DragAxis

Locks the position of the draggable elements inside the container along the specified axis.

@Input('cdkDropListOrientation')

orientation: DropListOrientation

Direction in which the list is oriented.

@Input('cdkDropListSortPredicate')

sortPredicate: (index: number, drag: CdkDrag, drop: CdkDropList) => boolean

Functions that is used to determine whether an item can be sorted into a particular index.

@Input({ alias: 'cdkDropListSortingDisabled', transform: booleanAttribute })

sortingDisabled: boolean

Whether sorting within this drop list is disabled.

@Output('cdkDropListDropped')

dropped: EventEmitter<CdkDragDrop<T, any>>

Emits when the user drops an item inside the container.

@Output('cdkDropListEntered')

entered: EventEmitter<CdkDragEnter<T>>

Emits when the user has moved a new drag item into this container.

@Output('cdkDropListExited')

exited: EventEmitter<CdkDragExit<T>>

Emits when the user removes an item from the container by dragging it into another container.

@Output('cdkDropListSorted')

sorted: EventEmitter<CdkDragSortEvent<T>>

Emits as the user is swapping items while actively dragging.

element: inject<ElementRef<HTMLElement>>(ElementRef)

Methods
addItem

Registers an items with the drop list.

Parameters

item

CdkDrag<any>

getSortedItems

Gets the registered items in the list, sorted by their position in the DOM.

Returns
CdkDrag[]

removeItem

Removes an item from the drop list.

Parameters

item

CdkDrag<any>

Declaratively connects sibling cdkDropList instances together. All of the cdkDropList elements that are placed inside a cdkDropListGroup will be connected to each other automatically. Can be used as an alternative to the cdkDropListConnectedTo input from cdkDropList.

Selector: [cdkDropListGroup]

Exported as: cdkDropListGroup
Properties
Name Description
@Input({ alias: 'cdkDropListGroupDisabled', transform: booleanAttribute })

disabled: boolean

Whether starting a dragging sequence from inside this group is disabled.

Element that can be moved inside a CdkDropList container.

Selector: [cdkDrag]

Exported as: cdkDrag
Properties
Name Description
@Input('cdkDragBoundary')

boundaryElement: string | ElementRef<HTMLElement> | HTMLElement

Node or selector that will be used to determine the element to which the draggable's position will be constrained. If a string is passed in, it'll be used as a selector that will be matched starting from the element's parent and going up the DOM until a match has been found.

@Input('cdkDragConstrainPosition')

constrainPosition: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point

Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered.

@Input('cdkDragData')

data: T

Arbitrary data to attach to this drag instance.

@Input({ alias: 'cdkDragDisabled', transform: booleanAttribute })

disabled: boolean

Whether starting to drag this element is disabled.

@Input('cdkDragStartDelay')

dragStartDelay: DragStartDelay

Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element.

@Input('cdkDragFreeDragPosition')

freeDragPosition: Point

Sets the position of a CdkDrag that is outside of a drop container. Can be used to restore the element's position for a returning user.

@Input('cdkDragLockAxis')

lockAxis: DragAxis

Locks the position of the dragged element along the specified axis.

@Input('cdkDragPreviewClass')

previewClass: string | string[]

Class to be added to the preview element.

@Input('cdkDragPreviewContainer')

previewContainer: PreviewContainer

Configures the place into which the preview of the item will be inserted. Can be configured globally through CDK_DROP_LIST. Possible values:

  • global - Preview will be inserted at the bottom of the <body>. The advantage is that you don't have to worry about overflow: hidden or z-index, but the item won't retain its inherited styles.
  • parent - Preview will be inserted into the parent of the drag item. The advantage is that inherited styles will be preserved, but it may be clipped by overflow: hidden or not be visible due to z-index. Furthermore, the preview is going to have an effect over selectors like :nth-child and some flexbox configurations.
  • ElementRef<HTMLElement> | HTMLElement - Preview will be inserted into a specific element. Same advantages and disadvantages as parent.
@Input('cdkDragRootElement')

rootElementSelector: string

Selector that will be used to determine the root draggable element, starting from the cdkDrag element and going up the DOM. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to.

@Input({ alias: 'cdkDragScale', transform: numberAttribute })

scale: number

If the parent of the dragged element has a scale transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale.

@Output('cdkDragDropped')

dropped: EventEmitter<CdkDragDrop<any>>

Emits when the user drops the item inside a container.

@Output('cdkDragEnded')

ended: EventEmitter<CdkDragEnd>

Emits when the user stops dragging an item in the container.

@Output('cdkDragEntered')

entered: EventEmitter<CdkDragEnter<any>>

Emits when the user has moved the item into a new container.

@Output('cdkDragExited')

exited: EventEmitter<CdkDragExit<any>>

Emits when the user removes the item its container by dragging it into another container.

@Output('cdkDragMoved')

moved: Observable<CdkDragMove<T>>

Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged.

@Output('cdkDragReleased')

released: EventEmitter<CdkDragRelease>

Emits when the user has released a drag item, before any animations have started.

@Output('cdkDragStarted')

started: EventEmitter<CdkDragStart>

Emits when the user starts dragging the item.

dropContainer: inject<CdkDropList>(CDK_DROP_LIST, { optional: true, skipSelf: true })!

element: inject<ElementRef<HTMLElement>>(ElementRef)

Methods
getFreeDragPosition

Gets the pixel coordinates of the draggable outside of a drop container.

Returns
Readonly<Point>

getPlaceholderElement

Returns the element that is being used as a placeholder while the current element is being dragged.

Returns
HTMLElement

getRootElement

Returns the root draggable element.

Returns
HTMLElement

reset

Resets a standalone drag item to its initial position.

setFreeDragPosition

Sets the current position in pixels the draggable outside of a drop container.

Parameters

value

Point

New position to be set.

Handle that can be used to drag a CdkDrag instance.

Selector: [cdkDragHandle]

Properties
Name Description
@Input({ alias: 'cdkDragHandleDisabled', transform: booleanAttribute })

disabled: boolean

Whether starting to drag through this handle is disabled.

element: inject<ElementRef<HTMLElement>>(ElementRef)

Element that will be used as a template for the preview of a CdkDrag when it is being dragged.

Selector: ng-template[cdkDragPreview]

Properties
Name Description
@Input()

data: T

Context data to be added to the preview template instance.

@Input({ transform: booleanAttribute })

matchSize: boolean

Whether the preview should preserve the same size as the item that is being dragged.

templateRef: inject<TemplateRef<T>>(TemplateRef)

Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged.

Selector: ng-template[cdkDragPlaceholder]

Properties
Name Description
@Input()

data: T

Context data to be added to the placeholder template instance.

templateRef: inject<TemplateRef<T>>(TemplateRef)

Reference to a draggable item. Used to manipulate or dispose of the item.

Properties
Name Description

beforeStarted: Subject<void>

Emits as the drag sequence is being prepared.

constrainPosition: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point

Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered.

data: T

Arbitrary data that can be attached to the drag item.

disabled: boolean

Whether starting to drag this element is disabled.

dragStartDelay: number | { touch: number; mouse: number; }

Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element.

dropped: Subject<{ previousIndex: number; currentIndex: number; item: DragRef; container: DropListRef; previousContainer: DropListRef; distance: Point; dropPoint: Point; isPointerOverContainer: boolean; event: MouseEvent | TouchEvent; }>

Emits when the user drops the item inside a container.

ended: Subject<{ source: DragRef; distance: Point; dropPoint: Point; event: MouseEvent | TouchEvent; }>

Emits when the user stops dragging an item in the container.

entered: Subject<{ container: DropListRef; item: DragRef; currentIndex: number; }>

Emits when the user has moved the item into a new container.

exited: Subject<{ container: DropListRef; item: DragRef; }>

Emits when the user removes the item its container by dragging it into another container.

lockAxis: 'x' | 'y'

Axis along which dragging is locked.

moved: Observable<{ source: DragRef; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: Point; delta: { x: -1 | 0 | 1; y: -1 | 0 | 1; }; }>

Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged.

previewClass: string | string[] | undefined

Class to be added to the preview element.

released: Subject<{ source: DragRef; event: MouseEvent | TouchEvent; }>

Emits when the user has released a drag item, before any animations have started.

scale: number

If the parent of the dragged element has a scale transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale.

started: Subject<{ source: DragRef; event: MouseEvent | TouchEvent; }>

Emits when the user starts dragging the item.

Methods
disableHandle

Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.

Parameters

handle

HTMLElement

Handle element that should be disabled.

dispose

Removes the dragging functionality from the DOM element.

enableHandle

Enables a handle, if it has been disabled.

Parameters

handle

HTMLElement

Handle element to be enabled.

getFreeDragPosition

Gets the current position in pixels the draggable outside of a drop container.

Returns
Readonly<Point>

getPlaceholderElement

Returns the element that is being used as a placeholder while the current element is being dragged.

Returns
HTMLElement

getRootElement

Returns the root draggable element.

Returns
HTMLElement

getVisibleElement

Gets the currently-visible element that represents the drag item. While dragging this is the placeholder, otherwise it's the root element.

Returns
HTMLElement

isDragging

Checks whether the element is currently being dragged.

Returns
boolean

reset

Resets a standalone drag item to its initial position.

setFreeDragPosition

Sets the current position in pixels the draggable outside of a drop container.

Parameters

value

Point

New position to be set.

Returns
this

withBoundaryElement

Element to which the draggable's position will be constrained.

Parameters

boundaryElement

HTMLElement | ElementRef<HTMLElement>

Returns
this

withDirection

Sets the layout direction of the draggable item.

Parameters

direction

Direction

Returns
this

withHandles

Registers the handles that can be used to drag the element.

Parameters

handles

(HTMLElement | ElementRef<HTMLElement>)[]

Returns
this

withParent

Sets the parent ref that the ref is nested in.

Parameters

parent

DragRef<unknown>

Returns
this

withPlaceholderTemplate

Registers the template that should be used for the drag placeholder.

Parameters

template

DragHelperTemplate<any>

Template that from which to stamp out the placeholder.

Returns
this

withPreviewContainer

Sets the container into which to insert the preview element.

Parameters

value

PreviewContainer

Container into which to insert the preview.

Returns
this

withPreviewTemplate

Registers the template that should be used for the drag preview.

Parameters

template

DragPreviewTemplate<any>

Template that from which to stamp out the preview.

Returns
this

withRootElement

Sets an alternate drag root element. The root element is the element that will be moved as the user is dragging. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to.

Parameters

rootElement

HTMLElement | ElementRef<HTMLElement>

Returns
this

Reference to a drop list. Used to manipulate or dispose of the container.

Properties
Name Description

autoScrollDisabled: boolean

Whether auto-scrolling the view when the user moves their pointer close to the edges is disabled.

autoScrollStep: number

Number of pixels to scroll for each frame when auto-scrolling an element.

beforeStarted: Subject<void>

Emits right before dragging has started.

data: T

Arbitrary data that can be attached to the drop list.

disabled: boolean

Whether starting a dragging sequence from this container is disabled.

dropped: Subject<{ item: DragRef; currentIndex: number; previousIndex: number; container: DropListRef; previousContainer: DropListRef; isPointerOverContainer: boolean; distance: Point; dropPoint: Point; event: MouseEvent | TouchEvent; }>

Emits when the user drops an item inside the container.

element: HTMLElement | ElementRef<HTMLElement>

Element that the drop list is attached to.

enterPredicate: (drag: DragRef, drop: DropListRef) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.

entered: Subject<{ item: DragRef; container: DropListRef; currentIndex: number; }>

Emits when the user has moved a new drag item into this container.

exited: Subject<{ item: DragRef; container: DropListRef; }>

Emits when the user removes an item from the container by dragging it into another container.

lockAxis: 'x' | 'y'

Locks the position of the draggable elements inside the container along the specified axis.

receivingStarted: Subject<{ receiver: DropListRef; initiator: DropListRef; items: DragRef[]; }>

Emits when a dragging sequence is started in a list connected to the current one.

receivingStopped: Subject<{ receiver: DropListRef; initiator: DropListRef; }>

Emits when a dragging sequence is stopped from a list connected to the current one.

sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean

Function that is used to determine whether an item can be sorted into a particular index.

sorted: Subject<{ previousIndex: number; currentIndex: number; container: DropListRef; item: DragRef; }>

Emits as the user is swapping items while actively dragging.

sortingDisabled: boolean

Whether sorting items within the list is disabled.

Methods
connectedTo

Sets the containers that are connected to this one. When two or more containers are connected, the user will be allowed to transfer items between them.

Parameters

connectedTo

DropListRef<any>[]

Other containers that the current containers should be connected to.

Returns
this

dispose

Removes the drop list functionality from the DOM element.

drop

Drops an item into this container.

Parameters

item

DragRef<any>

Item being dropped into the container.

currentIndex

number

Index at which the item should be inserted.

previousIndex

number

Index of the item when dragging started.

previousContainer

DropListRef<any>

Container from which the item got dragged in.

isPointerOverContainer

boolean

Whether the user's pointer was over the container when the item was dropped.

distance

Point

Distance the user has dragged since the start of the dragging sequence.

event

MouseEvent | TouchEvent = {} as any

Event that triggered the dropping sequence.

dropPoint

Point

enter

Attempts to move an item into the container.

Parameters

item

DragRef<any>

Item that was moved into the container.

pointerX

number

Position of the item along the X axis.

pointerY

number

Position of the item along the Y axis.

index?

number

Index at which the item entered. If omitted, the container will try to figure it out automatically.

exit

Removes an item from the container after it was dragged into another container by the user.

Parameters

item

DragRef<any>

Item that was dragged out.

getItemIndex

Figures out the index of an item in the container.

Parameters

item

DragRef<any>

Item whose index should be determined.

Returns
number

getScrollableParents

Gets the scrollable parents that are registered with this drop container.

Returns
readonly HTMLElement[]

isDragging

Whether an item from this list is currently being dragged.

isReceiving

Whether the list is able to receive the item that is currently being dragged inside a connected drop list.

Returns
boolean

start

Starts dragging an item.

withDirection

Sets the layout direction of the drop list.

Parameters

direction

Direction

Returns
this

withElementContainer

Configures the drop list so that a different element is used as the container for the dragged items. This is useful for the cases when one might not have control over the full DOM that sets up the dragging. Note that the alternate container needs to be a descendant of the drop list.

Parameters

container

HTMLElement

New element container to be assigned.

Returns
this

withItems

Sets the draggable items that are a part of this list.

Parameters

items

DragRef<any>[]

Items that are a part of this list.

Returns
this

withOrientation

Sets the orientation of the container.

Parameters

orientation

DropListOrientation

New orientation for the container.

Returns
this

withScrollableParents

Sets which parent elements are can be scrolled while the user is dragging.

Parameters

elements

HTMLElement[]

Elements that can be scrolled.

Returns
this

Object that can be used to configure the behavior of DragRef.

Properties
Name Description

dragStartThreshold: number

Minimum amount of pixels that the user should drag, before the CDK initiates a drag sequence.

parentDragRef: DragRef

Ref that the current drag item is nested in.

pointerDirectionChangeThreshold: number

Amount the pixels the user should drag before the CDK considers them to have changed the drag direction.

zIndex: number

z-index for the absolutely-positioned elements that are created by the drag item.

Point on the page or within an element.

Properties
Name Description

x: number

y: number

Event emitted when the user starts dragging a draggable.

Properties
Name Description

event: MouseEvent | TouchEvent

Native event that started the drag sequence.

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user releases an item, before any animations have started.

Properties
Name Description

event: MouseEvent | TouchEvent

Native event that caused the release event.

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user stops dragging a draggable.

Properties
Name Description

distance: { x: number; y: number; }

Distance in pixels that the user has dragged since the drag sequence started.

dropPoint: { x: number; y: number; }

Position where the pointer was when the item was dropped

event: MouseEvent | TouchEvent

Native event that caused the dragging to stop.

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user moves an item into a new drop container.

Properties
Name Description

container: CdkDropList<T>

Container into which the user has moved the item.

currentIndex: number

Index at which the item has entered the container.

item: CdkDrag<I>

Item that was moved into the container.

Event emitted when the user removes an item from a drop container by moving it into another one.

Properties
Name Description

container: CdkDropList<T>

Container from which the user has a removed an item.

item: CdkDrag<I>

Item that was removed from the container.

Event emitted when the user drops a draggable item inside a drop container.

Properties
Name Description

container: CdkDropList<T>

Container in which the item was dropped.

currentIndex: number

Current index of the item.

distance: { x: number; y: number; }

Distance in pixels that the user has dragged since the drag sequence started.

dropPoint: { x: number; y: number; }

Position where the pointer was when the item was dropped

event: MouseEvent | TouchEvent

Native event that caused the drop event.

isPointerOverContainer: boolean

Whether the user's pointer was over the container when the item was dropped.

item: CdkDrag<I>

Item that is being dropped.

previousContainer: CdkDropList<O>

Container from which the item was picked up. Can be the same as the container.

previousIndex: number

Index of the item when it was picked up.

Event emitted as the user is dragging a draggable item.

Properties
Name Description

delta: { x: -1 | 0 | 1; y: -1 | 0 | 1; }

Indicates the direction in which the user is dragging the element along each axis. 1 means that the position is increasing (e.g. the user is moving to the right or downwards), whereas -1 means that it's decreasing (they're moving to the left or upwards). 0 means that the position hasn't changed.

distance: { x: number; y: number; }

Distance in pixels that the user has dragged since the drag sequence started.

event: MouseEvent | TouchEvent

Native event that is causing the dragging.

pointerPosition: { x: number; y: number; }

Position of the user's pointer on the page.

source: CdkDrag<T>

Item that is being dragged.

Event emitted when the user swaps the position of two drag items.

Properties
Name Description

container: CdkDropList<T>

Container that the item belongs to.

currentIndex: number

Index that the item is currently in.

item: CdkDrag<I>

Item that is being sorted.

previousIndex: number

Index from which the item was sorted previously.

Object that can be used to configure the drag items and drop lists within a module or a component.

Properties
Name Description

boundaryElement: string

constrainPosition: DragConstrainPosition

dragStartDelay: DragStartDelay

draggingDisabled: boolean

listAutoScrollDisabled: boolean

listOrientation: DropListOrientation

lockAxis: DragAxis

previewClass: string | string[]

previewContainer: 'global' | 'parent'

rootElementSelector: string

sortingDisabled: boolean

zIndex: number

moveItemInArray

Moves an item one index in an array to another.

Parameters

array

T[]

Array in which to move the item.

fromIndex

number

Starting index of the item.

toIndex

number

Index to which the item should be moved.

transferArrayItem

Moves an item from one array to another.

Parameters

currentArray

T[]

Array from which to transfer the item.

targetArray

T[]

Array into which to put the item.

currentIndex

number

Index of the item in its current array.

targetIndex

number

Index at which to insert the item.

copyArrayItem

Copies an item from one array to another, leaving it in its original position in current array.

Parameters

currentArray

T[]

Array from which to copy the item.

targetArray

T[]

Array into which is copy the item.

currentIndex

number

Index of the item in its current array.

targetIndex

number

Index at which to insert the item.

Possible places into which the preview of a drag item can be inserted.

  • global - Preview will be inserted at the bottom of the <body>. The advantage is that you don't have to worry about overflow: hidden or z-index, but the item won't retain its inherited styles.
  • parent - Preview will be inserted into the parent of the drag item. The advantage is that inherited styles will be preserved, but it may be clipped by overflow: hidden or not be visible due to z-index. Furthermore, the preview is going to have an effect over selectors like :nth-child and some flexbox configurations.
  • ElementRef<HTMLElement> | HTMLElement - Preview will be inserted into a specific element. Same advantages and disadvantages as parent.

type PreviewContainer = 'global' | 'parent' | ElementRef<HTMLElement> | HTMLElement;

Possible values that can be used to configure the drag start delay.

type DragStartDelay = number | {
    touch: number;
    mouse: number;
};

Possible axis along which dragging can be locked.

type DragAxis = 'x' | 'y';

Function that can be used to constrain the position of a dragged element.

type DragConstrainPosition = (point: Point, dragRef: DragRef) => Point;

Possible orientations for a drop list.

type DropListOrientation = 'horizontal' | 'vertical' | 'mixed';

Injection token that can be used to configure the behavior of the drag&drop-related components.

const CDK_DRAG_CONFIG: InjectionToken<DragDropConfig>;

Injection token that can be used to reference instances of CdkDropListGroup. It serves as alternative token to the actual CdkDropListGroup class which could cause unnecessary retention of the class and its directive metadata.

const CDK_DROP_LIST_GROUP: InjectionToken<CdkDropListGroup<unknown>>;

Injection token that can be used to reference instances of CdkDropList. It serves as alternative token to the actual CdkDropList class which could cause unnecessary retention of the class and its directive metadata.

const CDK_DROP_LIST: InjectionToken<CdkDropList<any>>;

Injection token that can be used to reference instances of CdkDragHandle. It serves as alternative token to the actual CdkDragHandle class which could cause unnecessary retention of the class and its directive metadata.

const CDK_DRAG_HANDLE: InjectionToken<CdkDragHandle>;

Injection token that can be used to reference instances of CdkDragPreview. It serves as alternative token to the actual CdkDragPreview class which could cause unnecessary retention of the class and its directive metadata.

const CDK_DRAG_PREVIEW: InjectionToken<CdkDragPreview<any>>;

Injection token that can be used to reference instances of CdkDragPlaceholder. It serves as alternative token to the actual CdkDragPlaceholder class which could cause unnecessary retention of the class and its directive metadata.

const CDK_DRAG_PLACEHOLDER: InjectionToken<CdkDragPlaceholder<any>>;
Azure & Blue theme selected.