Discussion on: Initial Null Problem of AsyncPipe and async data-binding

View post

Lars Gyrup Brink Nielsen • Feb 19 '20

Great explanation, Suguru! Would you like to publish it on Angular inDepth?

One observation: To use RxSubscribeDirective with NgForOf, we would have to do a nested structual directive.

Brian • Feb 24 '20

This is certainly an Angular In Depth standard of article👍

Suguru Inatomi • Feb 19 '20

Thank you Lars! Yes, I'd love to!

As you says, *rxSubscrive and *ngFor or other structural directives cannot be at the same place. I recommend adding <ng-container *rxSubscribe> at the root for subscribing to a stream.

<ng-container *rxSubscribe="state$; let state">
   ...sync-full template...
</ng-container>

Lars Gyrup Brink Nielsen • Feb 19 '20 • Edited

Come to our Slack workspace, and Max will set you up on the new site 🙌

I think it would be useful to show an example with a for loop such as:

<ng-container *rxSubscribe="order$; let order">
  <div *ngFor="let item of order">
    {{ item }}
  </div>
</ng-container>

Did you consider supporting microsyntax? Something like

<ng-container *rxSubscribe="state$ next state">
   ...sync-full template...
</ng-container>

Maybe even

<ng-container *rxSubscribe="state$ next state; error as err; complete: onComplete">
   ...sync-full template...
</ng-container>