Timing problem between OnInit and async-pipe

Question

I have a problem with the async-pipe in combination with an Observable which gets it's first value in OnInit. Must be a timing issue about the point in time when OnInit happens and the one when the template gets rendered and thus the Observable get subscribed.

Consider this component:

export class AppComponent implements OnInit {

    subjectA$: Subject<{name:string}>;
    subjectB$: Subject<{name:string}>;

    constructor(
        protected http: HttpClient
    ) {
    }

    ngOnInit() {
        this.subjectA$ = new Subject<{name: string}>();
        this.subjectA$.next({name: "A"});

        this.subjectB$ = new Subject<{name: string}>();
        setTimeout(() => {
          this.subjectB$.next({name: "B"});
        }, 0);
    }

}

and the template:

<p *ngIf='subjectA$ | async as subjectA; else: nosubjectA'>
  subjectA: {{subjectA.name}}
</p>

<ng-template #nosubjectA>
  <p>no subjectA</p>
</ng-template>

<p *ngIf='subjectB$ | async as subjectB; else: nosubjectB'>
  subjectB: {{subjectB.name}}
</p>

<ng-template #nosubjectB>
  <p>no subjectB</p>
</ng-template>

This results in

no subjectA

subjectB: B 

That means: Even if subjectA$ got a value in onInit, the view is not updated. If I wrap around the creation of the first value in a setTimeout as you can see with subjectB$, it works and I see the value. Although this is a solution I am wondering why does this this happen and is there a better solution?

One solution I already found would be using BehaviorSubject instead an provide the first value as initial value:

        this.subjectC$ = new BehaviorSubject<{name: string}>({name: "C"});

leads to subjectC: C with analogous template for subjectC.

Try all on StackBlitz.

My real observable is no Subject at all but the result of a combineLatest-call of different stuff, from which only one is (and have to unfortunately since it is using a value from an @Input()-annotation) a Subject, and manually pushed with next in OnInit as in the example. The rest comes from http et al. Most likely I could wrap the combined result in a BehaviourSubject but it seems ugly and dangerous to me, so it's even worse then the setTimeout approach. But I bet someone can help me out and find a real useful solution. In addition, I would prefer to avoid BehaviorSubject, to prevent developers from being tempted to use getValue.

See on Stackblitz

Answer 1

A quick fix would be to use ReplaySubject with buffer 1 instead of BehaviorSubject. You do not have to provide a default value and it neither has the getValue() function nor value getter. And yet it buffers (or holds) the last emitted value and emits it immediately upon new subscriptions.

Try the following

ngOnInit() {
  this.subjectA$ = new ReplaySubject<{name: string}>(1);
  this.subjectA$.next({name: "A"});

  this.subjectB$ = new ReplaySubject<{name: string}>(1);
  this.subjectB$.next({name: "B"});

  this.subjectC$ = combineLatest([this.subjectA$, this.subjectB$]).pipe(
    map((things: [{name:string}, {name:string}]): {name:string} => {
      return {name: things.map(thing => thing.name).join('|')}
    })
  );
}

I've modified your Stackblitz.

Answer 2

After the comment I made, I really couldn't help but think that there must be a better way - and finally thought of something that worked!

I just modified your stackblitz a bit.

private valueA = "A";
private valueB = "B";

subjectA$ = of({ name: this.valueA });
subjectB$ = of({ name: this.valueB });
subjectC$ = combineLatest([this.subjectA$, this.subjectB$])
          .pipe(
            map((things: [{name:string}, {name:string}]): {name:string} => {return {name: things.map(x => x.name).join('|')}})
          );

This way, we can even discard the ngOnInit hook, and everything works at it should!