Firing dragOver event while using @angular/cdk/drag-drop

Question

I use @angular/cdk/drag-drop module in my app. Dragging and dropping works as expected, but I want to do some actions when drag item is on top of drop area.

I tried this code, but it seems that onDragOver method is not called

<div cdkDropList>
    <span (dragover)="onDragOver($event)">...</span>
<div>

onDragOver($event){
    console.log('ondragover');
}

Is there any built in way in @angular/cdk/drag-drop to achieve this?

Answer 1

From the documentation, this is the available events for CdkDropList: (All of those events are output() EventEmitter)

https://material.angular.io/cdk/drag-drop/api#CdkDropList

@Output('cdkDropListDropped') dropped - Emits when the user drops an item inside the container.

@Output('cdkDropListEntered') entered - Emits when the user has moved a new drag item into this container.

@Output('cdkDropListExited') exited - Emits when the user removes an item from the container by dragging it into another container.

@Output('cdkDropListSorted') sorted - Emits as the user is swapping items while actively dragging.