Keep element position after reload page - drag and drop cdk Angular 7

user_9403392 0
Viewed 3910

I'm using cdk Drag & Drop from Angular 7, but now i'm stuck. When I reload the page, all the items that was organized keep going back to the original position. How can I save the position and retrieve they to the elements?

For now, this is what I have:

Parent of Pie

<div class="pie-content">
  <div class="individual-pie"  *ngFor="let pie of serials">
    <app-pie [serialnumber]="pie"></app-pie>
  </div>
</div>

Pie.html

<div
  cdkDragBoundary=".content"
  cdkDrag
  (cdkDragEnded)="dragEnd($event)"
  class="pie"
  [chart]="pie"
></div>

Pie.ts

dragEnd(event: CdkDragEnd) {
  console.log(event);
}
angular-cdk angular drag-and-drop
1 Answers

You can save your list to the local storage. This is how you use it on the page:

[chart]="pie"

and in your controller: @Input pie: string[];

so each time you drag and drop, save the list:

dragEnd(event: CdkDragEnd) {
  console.log(event);
  let myStorage = window.localStorage;
  myStorage.setItem("pie", pie);
}

and on refresh get the list from local storage:

ngOnInit() {
    let myStorage = window.localStorage;
    this.pie= myStorage.getItem("pie"));
  }
user_76040060
Related