0

Within a view I have a component that is using Angular cdkDrag to move elements around on a dashboard.

The data to this component is pass down from the parent (via single way binding) which is subscribed to a SignalR Hub.

The issue I am having is upon receiving the payload, if any of the elements have been moved, they then reset back to the default UI layout (as if you refreshed the page).

Is there a way to stop this?

Would I need to store the new position in cache and upon receiving the payload, apply the previous position (from cache)?.

Below is a StackBlitz that shows the issue. The project is similar in structure to mine: https://stackblitz.com/edit/angular-cdk-drag-columns-ldd9n2

DreamingInCode
  • 95
  • 2
  • 11

1 Answers1

0

So I found the issue, it appears to be a behaviour of Ngfor "reconstructing" the DOM.

details can be found here:

https://malcoded.com/posts/angular-ngfor/

https://angular.io/guide/template-syntax#ngfor-with-trackby

Essentially to fix the issue I added this to the html:

<div *ngFor="let item of items; trackBy: trackByItems">
  ({{item.id}}) {{item.name}}
</div>

and this in the components.ts:

trackByItems(index: number, item: Item): number { return item.id; }

Hope this helps.

DreamingInCode
  • 95
  • 2
  • 11