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 work:

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

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?