forkJoin after APIs are completed - rxjs

So,I'm in kind of fix here. I've got 2 GET APIs. I need to do something once those APIs return success.

I did the following.

let sub1$ = this.myService.callFirstApi();
let sub2$ = this.myService.callSecondApi();

forkJoin([sub1$,sub2$]).subscribe(() => executeRestCodeNow());


The above works fine but in my project, devs are subscribing to APIs and then working on the data from the APIs in individual functions, example:

myService.ts:

firstApi(){
return this.http.get(apiurl).pipe(map(res) => res);
}

secondApi(){
return this.http.get(apiurl).pipe(map(res) => res);
}


component.ts File:

ngOnint = () => {
this.getFirstApi();
this.getSecondApi();
}

getFirstApi(){
let sub1$ = this.myService.firstApi().subscribe((data) => doingSomethingWithData)
}

getSecondApi(){
let sub2$ = this.myService.firstApi().subscribe((data) => doingSomethingWithData)
}


Now, how do I combine these 2 separate functions and use forkJoin here? Because if I put them together in one function and use forkJoin like I showed at the beginning then I get an error as

"You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, Or Iterable"
​

I tried returning sub1$ and sub2$ too.

Continue reading...