I have a mat table that supports nested tree lists where I allow drag drop (reordering disabled) to drag row on top of each other. The problem is that I need events on each table row. But when a row is dragged, it’s replaced by a html duplicate, the placeholder, that does not have any events attached and does not update it’s classes:

<tr mat-row *matRowDef="let row; columns: getColumns()"
    cdkDrag
    [cdkDragDisabled]="!this.allowDragDrop || this.isEditing(row.item)"
    [hidden]="!this.isPathToRootExpanded(row)"
    [ngClass]="this.getTableRowClasses(row.item)"
    (click)="this.toggleSelection(row.item)"
    (cdkDragStarted)="this.onDragStarted(row.item)"
    (mouseenter)="this.updateDropTargetRow(row.item, false)"
    (mouseleave)="this.updateDropTargetRow(row.item, true)"
    (mousemove)="this.onDragMouseMove($event)">
</tr>

In this stackblitz prototype you can reproduce the problem. The dragged row does not get the hover-center highlight nor the indicators above or below.

I want to keep the original row and don’t want a placeholder.