Nested event.subscribe solution

Question

I'm using Angular dragula drag and drop, which allow me to move bootstrap cards all around the view. When you "drop" some item, it triggered this.dragulaService.drop.subscribe(), inside that I can cancel or roll back item dragged before the move is done.

I want to use my modal in there. which looks like this : let subscription = this.modalService.onSubmit.subscribe((val) => {

That modal subscription keep thread waiting for user clicking on OK or CANCEL in modal, which says "Are you sure you want to move this item?"

The problem, is that otter event subscription (dragula) does not wait for modal event subscription to finish, dragula just ends before modal confirmation and it's a problem for me. Because when I try to call drake.cancel, it does not exist any more.

CODE :

    this.dragulaService.drop.subscribe(
        value => {
        let modal: ModalComponent = this.modalService.GetModal();
        let subscription = this.modalService.onSubmit.subscribe((val) => {
            //Here if user clicks OK, we do nothing and drag-drop finish successfuly
            //If user clicks Cancel, we call this.dragulaService.find('bag-deals').drake.cancel(true);

Answer 1

You can use a concatMap in a pipe, here is an interesting article about Higher-Order RxJS Mapping Operators

I used it in your case in that way:

    let dropValue;
    this.dragulaService.drop
      .pipe(concatMap(value => {
        dropValue = value;
        const modal: ModalComponent = this.modalService.GetModal();
        return this.modalService.onSubmit;
      })).subscribe(value => {
         //Here if user clicks OK, we do nothing and drag-drop finish successfuly
         //If user clicks Cancel, we call this.dragulaService.find('bag-deals').drake.cancel(true);
    });