Undo drop in nz-zorro tree

Question

I have following code for the tree. HTML:

<nz-tree
  [nzTreeTemplate]="nzTreeTemplate"
  (nzOnDrop)="onNzOnDrop($event)" [nzData]="nodes" nzDraggable>
</nz-tree>
<ng-template #nzTreeTemplate let-node>
...
</ng-template>

Component:

onNzOnDrop($event: NzFormatEmitEvent) {
    [doing something that causes error]
    [revert the drop]
}

How to undo the drop in this case? Thank you.

Answer 1

Make the API call and make the observable return a falsy value, maybe using catchError, then the drop will be cancelled as shown in the example below.

You can try draggable-with-two-confirmation example:

beforeDrop(arg: NzFormatBeforeDropEvent): Observable<boolean> {
  // if insert node into another node, wait 1s
  if (arg.pos === 0) {
    return of(true).pipe(delay(1000));
  } else {
    return of(false);
  }
}

HTML:

<nz-tree 
    [nzData]="nodes" 
    nzDraggable nzBlockNode 
    [nzBeforeDrop]="beforeDrop" 
    (nzOnDrop)="nzEvent($event)"
>
</nz-tree>

Stackblitz Demo