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

Question

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?

aliasing for @for is currently not supported:github.com/angular/angular/issues/53233 — Chellappan வ
– Chellappan வ, Commented May 29, 2024 at 13:29
@Chellappanவ If you post that as an answer I will accept it and close the question. — Wilt
– Wilt, Commented May 29, 2024 at 19:30

Naren Murali · Accepted Answer · 2024-05-29 13:10:21Z

5

You can just directly use like this, there is no need to define a local variable (options).

@for(option of (options$ | async); track option) {
    <div>{{option.name}}</div>
}

If you require the full options, then I recommend a wrapped if condition, here you can use options variable inside the for loop.

@if (options$ | async; as options) {
    @for(option of options; track option) {
        <div>{{option.name}}</div>
    }
}

answered May 29, 2024 at 13:10

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

3 Comments

Wilt Over a year ago

Thanks for your answer. I understand there is no need for the alias, but in some cases it is just nice to have the alias (maybe not obvious in this simplified example).

Naren Murali Over a year ago

@Wilt Let only allows

Unknown "let" parameter variable "(options$ | async)". The allowed variables are: $index, $first, $last, $even, $odd, $count

I get this error!

Naren Murali Over a year ago

@Wilt Future version of angular will allow you to leverage @let so you can do <div> @let greeting = 'Hello, ' + name + '!'; <h1>{{ greeting }}</h1> </div> @let introduction link

Chellappan வ · Accepted Answer · 2024-05-30 06:50:47Z

2

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

answered May 30, 2024 at 6:50

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

1 Comment

Wilt Over a year ago

Yes, this works well. As I also wrote in my question this is exactly what I ended up using as a workaround.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related