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?
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) {
...
}
}