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?

Answer 1

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();