Unable to wait for SweetAlert response

Issue

I have this component method, which is invoked by a click.

executeEditUser() {
        this.alertService.confirmationAlertUserEdit();
        
        this.alertService.getBehaviorAlertEvent().subscribe({
            next: (isConfirmed)=>  {

                if (isConfirmed) {
                    this.userService.editUser(this.id, this.userModel).subscribe({
                        next: ()=> this.reloadResources(),
                        error: (err)=> this.alertService.errorAlert(err)
                     })
                    }   
                },
                error: (err)=> this.alertService.errorAlert(err)
        })
    }

So - I have alertService method (from separate class) which invokes SweetAlert Dialog box with Confirm or Cancel. Depending on Confirm/ Cancel, the SweetAlert triggers BehaviorSubject event which is then handled by the getBehaviorAlertEvent subscription.

The problem is that when the dialog box appears, even before Confirm/ Cancel click, the next line of code (the subscription) gets executed. And the alertService is a separate class for alert handling.

This is my code for the alert:

confirmationAlertUserEdit() {
      Swal.fire({
          title: 'Confirm user edit?',
          text: "Changes can be made again",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Save edit'
        }).then((result) => {
          if (result.isConfirmed) {
            Swal.fire(
              'Edited!',
              'User edited',
              'success'
            )
          this.behaviorAlertEvent.next(true);
          } else {
          this.behaviorAlertEvent.next(false);
          }
        })
  }

The Swal.fire method returns a promise which is handled by the 'then' callback. Even so, the code execution continues in the other class. How can I wait for the Confirm/ Cancel actions before subscribing to the event?

Solution

The problem is somewhat fixed, but yet another problem arose.

It was not issue related to async. It was the case when error is emitted from the API, the HttpErrorResponse class and its error.message was undefined, for some reason.

Still, I am not sure why but only HttpErrorResponse.error is 'defined'.

Answered By - Andrеw