Angular RXJS forkJoin completion progress

Question

I would like to have a progress counter for bulk HTTP requests in my Angular app. I use forkJoin to execute an array of Observables. The pipe only executes once. It does not execute for the X number of requests in the obs variable. Is there a different way to get a complete Observable in a forkJoin?

Here is what I have tried:

    let obs: Observable<any>[] = [...];
    let counter: number = 0;
    // obs has 5 items here.
    forkJoin(obs)
    .pipe(
      tap(() => {
        counter++;
      })
    )
    .subscribe(res => {
    })
    .add(() => {
      loadingRef.close(loadingRef);
      this.refresh();
      // Counter only equals 1 here.
      // It should equal 5.
    });

Answer 1

You can transform the observables by adding a pipe, like this:

forkJoin(this.obs.map(o => o.pipe(tap(() => this.count++))))
    .subscribe();

Well, the count goes for a very bumpy ride, but it's one solution

See the stackblitz