Cancel drag on key press Angular cdk Drag and Drop

Question

I´m working in a application implementing the new drag and drop from angular material CDK and i´m trying to cancel the drag event of the element pressing Esc, i

Answer 1

The best way to do it is to call event.source._dragRef.reset(); (as @AleRubis mentioned in comment) on ESC key press. Now the question is from where you can get that _dragRef outside cdkDrag events (ESC key event), you can save it in a component variable like this when drag starts.

Component:

cdkDragStarted = (event) => { this.dragRef = event.source._dragRef; }

Template:

Draggable paragraph