How to get notification when the last observable finish emitting values?

rxjs
rxjs endwith
rxjs finalize
rxjs take last emitted value
rxjs observable
observable get last value angular
observable catch error angular 8
rxjs throttle

We used to have one call to the API

reqFinanceDataWithFilters(req): Observable<any> {
  return this.http.post(env.baseUrl + req.url, req.filters)
    .pipe(map(this.extractResults));
}

The above request would return a giant json that takes time to build at the API level. So we decided to break it into 4 calls. Now we have:

reqViz.url = 'viz-data';
this.reqFinanceDataWithFilters(reqViz)
    .pipe(...)

reqTableTop.url = 'summary-data';
this.reqFinanceDataWithFilters(reqTableTop)
    .pipe(...)

reqTableMiddle.url = 'monthly-expenses';
this.reqFinanceDataWithFilters(reqTableMiddle)
    .pipe(...)

So I have 4 independant calls to the API. The order the response for each of them is not important. All I want to know when the last one is done receiving response so that I can hide the spinner and display the page.

Thanks for helping

You can use forkJoin for this.

From LearnRxJS.io:

Why use forkJoin?

This operator is best used when you have a group of observables and only care about the final emitted value of each. One common use case for this is if you wish to issue multiple requests on page load (or some other event) and only want to take action when a response has been received for all. In this way it is similar to how you might use Promise.all.

Be aware that if any of the inner observables supplied to forkJoin error you will lose the value of any other observables that would or have already completed if you do not catch the error correctly on the inner observable. If you are only concerned with all inner observables completing successfully you can catch the error on the outside.

Here, give this a try:

import { forkJoin } from 'rxjs';
import { delay, catchError } from 'rxjs/operators';

...

loading = true;
reqViz.url = 'viz-data';
const viz = this.reqFinanceDataWithFilters(reqViz)
  .pipe(
    ...
    catchError(error => of(error))
  )

reqTableTop.url = 'summary-data';
const summary = this.reqFinanceDataWithFilters(reqTableTop)
  .pipe(
    ...
    catchError(error => of(error))
  )

reqTableMiddle.url = 'monthly-expenses';
const monthy = this.reqFinanceDataWithFilters(reqTableMiddle)
  .pipe(
    ...
    catchError(error => of(error))
  )

forkJoin(viz, summary, monthly)
  .subscribe(
    res => {
      loading = false;
    }
  )

Building an RxJS .endWith() operator - Rares Matei, In RxJS, there's a startWith operator that emits the items you specify need to emit one final item before letting the observable complete: an endWith operator. And to get straight to the point, here's the implementation I came up with: For normal next notifications, . materialize() simply wraps the value in  When a second observer subscribes, the observable then wire up a new event handler and delivers values to that second observer in a separate execution. Sometimes, instead of starting an independent execution for each subscriber, you want each subscription to get the same values-even if values have already started emitting.

forkJoin(/* your observalbes here */).subscribe(values => {
   // do stuff, all observables have completed
})

https://www.learnrxjs.io/operators/combination/forkjoin.html

Throttling notifications from multiple users with RxJS, Emits a value from the source Observable, then ignores subsequent source LAST emission, then emits only the last source value (at the end of If not — create one and emit, if yes — just get it and emit to subscribers. RxJS implements the last operator. It optionally takes a predicate function as a parameter, in which case, rather than emitting the last item from the source Observable, the resulting Observable will emit the last item from the source Observable that satisfies the predicate.

forkJoin or merge can be interesting options, but another approach would be converting the sources to a stream via from, using concatMap to make the api call, and calling finalize at the end.

Which is better? Well, it's really a matter of taste. The stream from the pipe will contain one result at a time, instead of an array of all objects as would be the case with forkJoin. If you need to run similar processes on each item after the api call then it would make sense to use this method. For example, it would only be possible with this method if you wanted to show progress in the UI.

isRunning = true;
completedItems = 0;
progress = 0;
from([reqViz, reqTableTop, reqTableMiddle]).pipe(
   concatMap(req => this.reqFinanceDataWithFilters(reqTableMiddle)),
   tap(() => progress = (++completedItems) / 3),
   finalize(() => isRunning = false) // this is called at the end no matter what.
);

Reactive Programming with RxJava: Creating Asynchronous, , takeLast(n) emits only the last n val‐ues from the stream before it completes. keep a buffer of the last n values and when it receives completion notification, Additionally, both first() and last() have overloaded versions that take predicates. reduce waits for the observable to finish before emitting the result. scan does the same job but passes values as they come. toArray waits for the observable to finish before emitting the result. I think there should be an operator similar to toArray that passes the array as it keeps receiving values.

Learning Reactive Programming with Java 8, It will emit only the notifications passed to its onNext() and onError() methods and will complete We can subscribe to the Subject instance; it is an Observable instance after The third Subscriber will only receive notifications emitted after it subscribes. AsyncSubject: This emits the last value (and only that) [47] Chapter 3. An observable is hot when the producer is emitting values outside of the observable. We can actually make our cold observable hot (technically, this is more of a warm approach) with a few changes: // Add this to the top: import 'rxjs/add/operator/share'; var observable = Observable.create((observer:any) => { // Code removed for brevity }).share

takeLast, Emits only the last count values emitted by the source Observable. complete notification emission from the source in order to emit the next values on the output  Emit variable amount of values in a sequence and then emits a complete notification.

PHP Reactive Programming, Observables are like a push model, where a value is pushed down the operator because it's the Observable that decides when it should emit the next value. The important consequence is that we'd have to have the array prepared Each Observable can send one error, or one complete notification; but never both. With observable.subscribe, the given Observer is not registered as a listener in the Observable. The Observable does not even maintain a list of attached Observers. A subscribe call is simply a way to start an "Observable execution" and deliver values or events to an Observer of that execution. Executing Observables