Angular 2 + RxJS: async pipe with .share() operator

Question

When using the async pipe on a observable that is using the .share() operator (due to expensive calculations in the backend), I stumbled upon this behaviour:

data$ = (new Observable(observer => {
    let counter=0;
    observer.next(counter)

    window.setInterval(() => {
      observer.next(counter);
      counter++;
    }, 2000);
  }))
  .share();

Template:

{{ (data$|async) !== null }}
{{ (data$|async) !== null }}

The output of the initial value is:

true false

The following outputs (after more than 2 seconds) are:

true true

which is the behavior I would expect for the first value, too. If I omit the .share(), the output for the first value is "true true", as I would expect. I suppose the behavior above is due to the fact that the first expression in the template triggers observable execution, and once the second async pipe subscribes to the observable, the data is already gone. Is this explanation correct? And how can I avoid this behavior?

Since there is supposed to be a single value, it is observer.next(...); observer.complete(). — Estus Flask
the example with a single value was just for demonstration, in my app the observable has multiple values — highwaychile
I edited my question with an example code: The first value of the observable triggers the strange behavior, while the later ones don't. Do you maybe know a way to make the first value available for both async pipes? — highwaychile
I guess I do. In RxJS4 shareReplay(1) was used (as the name says, it shares the replay of last 1 value). For A2+RxJS5 a direct counterpart can be used, see the answer. — Estus Flask

Estus Flask Estus Flask · Accepted Answer · 2016-09-20T22:52:12

According to the reference,

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

In RxJS 4, shareReplay is used to achieve the desired behaviour.

In RxJS 5, a direct counterpart to shareReplay is publishReplay followed by refCount (see the explanation and the discussion).

So it should be

data$ = (new Observable(observer => { ... }))
.publishReplay(1)
.refCount();

Angular 2 + RxJS: async pipe with .share() operator

1 Answers