Removing latest item from drop list

Question

I am working on angular drag and drop. My Code is as follows

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

The item which I am dropping will always be dropped at end of done list. I want to have a "X" mark on latest item dropped(suppose user drags and drops item1 then "X" should be on items1 and if user drags and drops item2 then "X" should be only on item2) so that if user wishes user can click on "X" and item is removed from done list and get back to the "TO DO" list again.

Answer 1

I have made the changes. So I am pasting the HTML and TS code here. I am unsure if the code saves on the stackblitz.

In component file cdk-drag-drop-connected-sorting-example.ts:

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

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: "cdk-drag-drop-connected-sorting-example",
  templateUrl: "cdk-drag-drop-connected-sorting-example.html",
  styleUrls: ["cdk-drag-drop-connected-sorting-example.css"]
})
export class CdkDragDropConnectedSortingExample  implements OnInit{
  todo = [
    "Get to work",
    "Pick up groceries",
    "Go home",
    "Fall asleep",
    "Walk Dog",
    "Stretch",
    "Code Stuff",
    "Drag Stuff",
    "Drop Stuff",
    "Run",
    "Walk"
  ];




  done = ["Get up", "Brush teeth", "Take a shower", "Check e-mail", "Walk dog"];

  public DroppedListLength;  // tracking the length of the list


ngOnInit() {
  this.DroppedListLength = this.done.length;
}

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      console.log("first if..");
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        this.done.length
      );
      console.log("second if..");
      this.DroppedListLength = this.done.length; // update the list length for any drop
    }
  }
// just add a function to remove the last added value
  removeLastDroppedItem() {
    this.done.pop();
this.DroppedListLength = this.done.length; // you can add this to keep track of last item in the list
  }
}

In html cdk-drag-drop-connected-sorting-example.html you only need to add a button and associate its click with the above function:

<div class="example-container">
    <h2>To do</h2>

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

    <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="example-list"
     (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of done; let i = index" cdkDrag>{{item}}
      <span *ngIf="i+1 === DroppedListLength" (click)="removeLastDroppedItem()">X</span></div>
    </div>
</div>

Note: you can update these files and it should work as intended.