Trying to clear Angular 8 CDK Drag and Drop List

Question

I'm making a simple drag and drop list with Angular and can't figure out how to reset the tables to their starting arrangements. I was trying to use transferArrayItem but I don't know how to reference the table to get access to the items in the list.

<div class="container">
<h2>Groceries</h2>

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
  [cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
<div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>

<div class="container">
<h2>Cart</h2>

<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done"
 [cdkDropListConnectedTo]="todoList" class="list" (cdkDropListDropped)="drop($event)">
<div class="list-item" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>

<div id="buttons">
<button id="clearCart" (click)="clearCart()">Clear Cart</button>
<button id="checkout" (click)="checkout()">Checkout</button>
</div>

This is my "groceries.component.html" file where the lists are located and defined. And below is my "groceries.component.ts" file where the functions are ran.

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
selector: 'app-groceries',
templateUrl: './groceries.component.html',
styleUrls: ['./groceries.component.css'],
})
export class GroceriesComponent {
todo = [
'Apple',
'Banana',
'Avocado',
'Cheez-Its',
'Doritos',
'Gushers',
'Orange',
'Big ol steaks'
];

done = [
];

drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
  transferArrayItem(event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex);
}
}

clearCart(){


window.alert("Cart has been cleared!");
}

exit(){

}

checkout(){
window.alert("Don't worry about paying, we'll ship them right now!");
}
}

I was going to use the exit() method to reset the elements back to original positions but still run into the problem of not knowing how to access the information of the items in the "done" array.

Also it's worth noting that I'm exploring into Angular for the first time, the "todo" and "done" lists were autogenerated and I plan on changing the names when I get the functionality working.

Answer 1

  exit() {
    this.todo = [...this.todo, ...this.done];
    this.done = [];
  }

https://stackblitz.com/edit/angular-avfyze?file=app/cdk-drag-drop-connected-sorting-example.ts