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

Question

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 -->
}

Yong Shun · Accepted Answer · 2024-04-12 06:31:08Z

2

You need the ; (semicolon) before as.

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

Reference: Angular - @if (Description)

Demo @ StackBlitz

answered Apr 12, 2024 at 6:31

Yong Shun

54.6k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Freestyle09 Over a year ago

Yeah that's the character I was missing :D It works! Thanks!

Freestyle09 Over a year ago

Yeah I was searching in the wrong tab that's why I couldn't find it in the official documentation, it's under Reference tab also for the new documenation, angular.dev/api/core/@if

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related