cdkDragEntered not working on entering a cdkDrag item

can anybody tell me why cdkDragEntered is not firing the event?

Html:

html

<div
class="dragarea"
[ngClass]="{ 'bg-blue': isDragging }"
(cdkDragEntered)="onDragEnter($event)"
>
drag area
</div>
<div>
<ul>
<li *ngFor="let item of items" cdkDrag>{{ item.name }}</li>
</ul>
</div>



Component:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-drag',
templateUrl: './drag.component.html',
styleUrls: ['./drag.component.css'],
})
export class DragComponent implements OnInit {
constructor() {}

ngOnInit() {}

isDragging!: boolean;
onDragEnter(event: any): void {
this.isDragging = true;
console.log('hello');
}
items = [
{ id: 1, name: 'shray' },
{ id: 2, name: 'rocket' },
{ id: 3, name: 'cod' },
{ id: 4, name: 'halo' },
];
}


Css:

.dragarea {
width: 100px;
height: 100px;
background-color: grey;
}
.bg-blue {
background-color: blue;
}


stackblitz link

I want to fire an event when a cdkDrag item is entered in a non-droppable, non-draggable container.

Continue reading...