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. https://stackblitz.com/edit/stackblitz-starters-zutvxk I want to keep the original row and don't want a placeholder. Continue reading...
