I'm a little confused as to how and when nested async pipes resolve in angular2 templates, and the documentation isn't in a great place right now, so I'm hoping someone on SO can help.
I have a very simple Rxjs Observable returned from a service, via Observable.of(myArray).delay(2000)
- the delay is there to help show what is going on with the timing.
In my template, I'm just using an async pipe on the observable returned above in an enclosing <p>
tag to control when it is shown, and then trying to show the returned array length inside of that <p>
tag:
<p *ngIf="!(lists | async)">Waiting for lists...</p>
<p *ngIf="lists | async">We have lists! How many? => {{(lists | async)?.length}}</p>
So when you load this up, "waiting for lists" is displayed, 2 seconds later we get the "We have lists!" part, as expected, but then it takes another 2 seconds for the inner async pipe to resolve and display the resolved array length.
How can I get the length to show up at the same time as everything else that depends on the Observable returning its value(s)? Or is this just not a good use case for async pipes, and I should just subscribe()
in my component instead?