Combine multiple "| async as" in the same ngIf

Which @angular/* package(s) are relevant/releated to the feature request?

common

Description

Currently it is not possible to have the following:

<ng-container *ngIf="(data1$ | async as data1) && (data2$ | async as data2)">
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</ng-container>

Workarounds are as follow:

<ng-container *ngIf="data1$ | async as data1">
  <ng-container *ngIf="data2$ | async as data2">
    <div>{{ data1 }}</div>
    <div>{{ data2 }}</div>
  <ng-container>
</ng-container>

Or even something like this:

// TS
data$ = combineLatest([
  data1$,
  data2$
]).pipe(
  map(([data1, data2]) => ({
    data1,
    data2
  }))
)

<!-- HTML -->
<ng-container *ngIf="data$ | async as data">
  <div>{{ data.data1 }}</div>
  <div>{{ data.data2 }}</div>
</ng-container>

This, in my eyes, is not super clean and is more difficult to read. It would be very helpful to extend the as keyword for this.

Proposed solution

As described above, it would be super clean to have something like this:

<ng-container *ngIf="(data1$ | async as data1) && (data2$ | async as data2)">
  <div>{{ data1 }}</div>
  <div>{{ data2 }}</div>
</ng-container>

Alternatives considered

I don’t see any alternatives, except of using the workarounds which I use today already.

[lukasmatta]

@nicolaric Hello, there is another workaround you can use in the template, which you didn’t mention:

<ng-container *ngIf="{data1: data1$ | async, data2: data2$ | async} as d">
  <ng-container *ngIf="d.data1 && d.data2">
    {{d.data1}} {{d.data2}}
  </ng-container>
</ng-container>

[Airblader]

the as syntax is specfic to the ngIf directive

I don’t think that’s correct; it can also be used with any other custom structural directive. Of course your point that it’s tied to the directive and not the pipe remains valid.

If the team wanted to support the use case, but not the solution, then a syntax like this would be an alternative by allowing a kind of destructuring:

*ngIf="[a$ | async, b$ | async] as [a, b]"

This assumes you only want to alias, and not actually render conditionally.

---

Or even something like this:

You can also combine them directly in the template. It’s similar to the above, but already works now:

<... *ngIf="{ a: a$ | async, b: b$ | async } as v">
    {{ v.a }}
    {{ v.b }}

This assumes you only want to alias, and not actually render conditionally.