How does Universal SSR handle async pipes in *ngIf

Viewed 484

The component's template may contain such a section:

<ng-container *ngIf="myStream$ | async as data">
...
</ng-container>

The component's ngOnInit() may subscribe to an observable like this:

this.myStream$ = myObservable.subscribe();

Will the SSR rendered page contain the ng-container's contents, if the observable fires shortly after ngOnInit executed? Will it never be rendered (since it is async)? Is there even a deterministic answer to this?

1 Answers

First I think the code is wrong. You're actually subscribing 2 times. Once in your ngOnInit() and the second time in template by using async pipe.

Will the SSR rendered page contain the ng-container's contents, if the observable fires shortly after ngOnInit executed?

Yes it would. But remember, the value(s) of observable would be emitted both on server side and client side, unless you use transferState API. docs for transferState

Will it never be rendered (since it is async)?

async pipe is a built-in pipe that automatically subscribes and unsubscribes from your observable.async pipe docs

Related