DEV Community

Initial Null Problem of AsyncPipe and async data-binding

Suguru Inatomi on February 19, 2020

Original Post: https://blog.lacolaco.net/2020/02/async-pipe-initial-null-problem-en/ Angular's AsyncPipe is a useful feature for template binding ...
Read full post
Collapse
 
sebbdk profile image
Sebastian Vargr •

Null is bad.

The checks etc. that is required for asyncPipe makes it unreliable, since the expected type changes.

Yes we can code around it with conditionals, but that's more akin to mitigation. :/

Unfortunately my impression is that the only real fix' here is to not use async pipe.

Return types should be reliable.

Collapse
 
n_mehlhorn profile image
Nils Mehlhorn •

Nice article, coincidentally I recently wrote up something very similar: dev.to/angular/handling-observable...

Collapse
 
lacolaco profile image
Suguru Inatomi •

Wow, really coincidentally! I'll add a link to recommend your article!

Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen •

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.

Collapse
 
lacolaco profile image
Suguru Inatomi •

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>
Collapse
 
layzee profile image
Lars Gyrup Brink Nielsen • • 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>
Collapse
 
briancodes profile image
Brian •

This is certainly an Angular In Depth standard of article👍