One feature I'm currently utilizing is the Angular dragula drag and drop functionality, which enables me to effortlessly move around Bootstrap cards within the view. When an item is "dropped," it triggers the this.dragulaService.drop.subscribe() function, allowing me to either cancel or revert the dragged item before the move is completed.
Incorporating my modal into this process looks something like this:
let subscription = this.modalService.onSubmit.subscribe((val) => {
This modal subscription essentially waits for the user to click on either OK or CANCEL in the modal window that asks, "Are you sure you want to move this item?"
The issue arises when the other event subscription (dragula) does not wait for the modal event subscription to conclude; dragula completes before the modal confirmation takes place, causing problems for me as calling drake.cancel results in an error due to the absence of the necessary elements.
CODE :
this.dragulaService.drop.subscribe(
value => {
let modal: ModalComponent = this.modalService.GetModal();
let subscription = this.modalService.onSubmit.subscribe((val) => {
// If the user clicks OK, no action is taken and the drag-drop operation concludes successfully
// If the user clicks Cancel, we call this.dragulaService.find('bag-deals').drake.cancel(true);