How to use async values in object using new syntax @if in Angular?

In the previous *ngIf directives we were able to chain multiple async operations to not repeat the async pipe in the template but to reuse them later as one subscription, now I want to use the same behavior using the new @if syntax provided in Angular 17, is it possible?

Old way:

<ng-container *ngIf="{
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // and so on...
} as data">
  <span *ngIf="data.test.length">Show something</span>
</ng-container

I want to replace the code above to use only @if statement

@if({
   test: test$ | async,
   anotherOne: anotherOne$ | async,
   // it doesn't work that way
} as data) {
   <!-- show something -->
}

>Solution :

You need the ; (semicolon) before as.

@if({ test: test$ | async, anotherOne: anotherOne$ | async }; as data) { 
  <!-- show something -->
}

Reference: Angular – @if (Description)

Demo @ StackBlitz