Previously, we were able to chain multiple async operations using *ngIf directives in Angular. This allowed us to avoid repeating the async pipe in the template and instead reuse them as a single subscription. With the introduction of the new @if syntax in Angular 17, I am curious if we can achieve the same behavior with this new syntax.
Here is the old way of achieving it:
<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 by utilizing only the @if statement:
@if({
test: test$ | async,
anotherOne: anotherOne$ | async,
// unfortunately, it doesn't work this way
} as data) {
<!-- show something -->
}