[SOLVED] Angular new control flow @for with async pipe and aliasing variable with as

Angular new control flow @for with async pipe and aliasing variable with as

I migrated from the structural directives *ngIf and *ngFor to the new control flow with @if and @for in Angular.

But there is one case that I used previously but I cannot seem to get it to work with the new control flow. Tried to find some more information also online but didn't find anything specific on this particular case so I decided to post here.

I used to do:

*ngFor="let option of options$ | async as options"

But neither of these seem to work:

@for(option of options$ | async; as options, track option)
@for(option of options$ | async; as options; track option)
@for(option of (options$ | async; as options); track option)

So I ended up splitting it into an @if and @for combination like so:

@if (options$ | async; as options) {
  @for(option of options) {
    ...
  }
}

But it would be nice to make it work in one line. Is there some valid syntax to make this combination of async pipe and aliasing a variable work?

Solution

As of Angular 18, you can create aliases for @if block , but aliasing @for is not currently supported.

@if (options$ | async; as options) {
  @for(option of options) {
    ...
  }
}

For More Information