Improve async pipe for single object observables

I’m submitting a …

[x] feature request

Current behavior Main motivation: print multiple object properties by using the async pipe with 1 network request

For array observables myObjects$: MyObject[] you can use the async pipe in the following way:

<div *ngFor="let myObject of myObjects$ | async">
  <div>{{myObject.property1}}</div>
  <div>{{myObject.property2}}</div>
  <div>{{myObject.property3}}</div>
</div>

The code above will end in 1 network request.

For single object observables myObjects$: MyObject you can use the async pipe in the following way:

<div>
  <div>{{(myObjects$ | async)?.property1}}</div>
  <div>{{(myObjects$ | async)?.property2}}</div>
  <div>{{(myObjects$ | async)?.property3}}</div>
</div>

The code above will end in 3 network requests 😦

For sure you could cache the observable .publishReplay(1).refCount() (only 1 network request) but all together it looks odd.

Expected behavior Add support for a local template variable e.g.:

<div *ngIf="let myObject = myObjects$ | async">
  <div>{{myObject.property1}}</div>
  <div>{{myObject.property2}}</div>
  <div>{{myObject.property3}}</div>
</div>

What is the motivation / use case for changing the behavior? Beautiful code for printing multiple object properties by using the async pipe with 1 network request.

Please tell us about your environment: Linux

• Angular version: 2.0.2
• Browser: All
• Language: TypeScript 2.0.3
• Node (for AoT issues): 6.7.0

[DzmitryShylovich]

http://plnkr.co/edit/Sunu2LPQVAaWZvZRcWXb?p=preview

[DzmitryShylovich]

For sure you could cache the observable .publishReplay(1).refCount()

there’s a shortcut - share(). But I agree it would be very very useful.