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?
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]);
})