Support for as in ngFor

[cexbrayat]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Angular supports the following syntax in *ngFor:

<div *ngFor="let user of users | slice: 0 : 2 as slicedUsers; index as i">

Currently the control flow schematics generates:

@for (user of users | slice: 0 : 2 as slicedUsers; track user) {<div>

which is not valid with the control flow syntax

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: Errors during JIT compilation of template for UsersComponent: Parser Error: Unexpected token 'as' at column 23 in [users | slice: 0 : 2 as slicedUsers] in ng:///UsersComponent/template.html@1:10 ("

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.0-next.8
Node: 18.16.0
Package Manager: yarn 1.22.17
OS: darwin arm64

Angular: 17.0.0-next.8
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0-next.8
@angular-devkit/build-angular   17.0.0-next.8
@angular-devkit/core            17.0.0-next.8
@angular-devkit/schematics      17.0.0-next.8
@schematics/angular             17.0.0-next.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.0

Anything else?

I'm not sure how this should be migrated as I think the control flow syntax does not allow to alias the resulting collection

[alxhub]

This seems like a simple bug - the migration is missing the ;. The right syntax is:

@for (user of users | slice: 0 : 2; as slicedUsers; track pony) {

[cexbrayat]

I tried but it did not compile I think, is it supposed to be supported by the control flow syntax? I don't think there is a test about this in the fwk.

[pkozlowski-opensource]

Yeh, I don't think we've added support for aliasing input collections

[alxhub]

I mistook the original issue as being related to @if - @for as mentioned doesn't support aliasing of the collection.

[spock123]

Track pony?

[cexbrayat]

@spock123 It's an example from my book, I forgot to change one of the variables when writing the issue 😆. Fixed 👍

[cexbrayat]

This has been fixed by b2aeaf5 as it now warns the developers of such cases

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}