Make Angular only redirect when both API calls have been completed?

user_18522824 0
Viewed 26
  completeMedicalDataSubmission(forReview: boolean, success: MedicalData, newStatus: Status | undefined ) {
    let msg = this.translate.instant("GENERAL.DATA_SAVED");
    this.snackBar.open(msg, '\u2716', {duration: 8000, panelClass: ['goodPanel']});
    if (forReview) {
      this.patientDataReviewService.requestPatientDataReviewByPatient(success.medicalDataId!).subscribe(success => {
        if (this.onComplete !== null) {
          this.router.navigate([this.onComplete]);
        }
      })

    }
    if (newStatus) {
      this.patientDataReviewService.updatePatientDataReviewByResearcher(this.id!, this.demographicMedicalData!.medicalDataId!, this.demographicMedicalData!.version!, newStatus).subscribe()
    }
    if (!forReview && this.onComplete !== null)
      this.router.navigate([this.onComplete]);
  }

Specifically, is there a way to make it so that the router.navigate only happens when all API calls (if required) have been completed?

angular javascript
1 Answers

You can use forkJoin from RxJs libary. you can see document here

in your case you can do:

import { forkJoin } from 'rxjs';



const observable = forkJoin({
  first: this.patientDataReviewService.requestPatientDataReviewByPatient(success.medicalDataId!),
  second: this.patientDataReviewService.updatePatientDataReviewByResearcher(this.id!, this.demographicMedicalData!.medicalDataId!, this.demographicMedicalData!.version!, newStatus)
});

and then subscribe

observable.subscribe(({first, second}) => {
  // do some thing with first and second value.
  this.router.navigate([this.onComplete]);
})
user_85545780
Related