Skip to content

Control flow schematic: ngFor with large nested ternary produces invalid code #53555

@mattlewis92

Description

@mattlewis92

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

core

Is this a regression?

No

Description

Just noticed one more bug when testing the control flow schematic!

Input:

<div
  *ngFor="
    let item of section === 'manage'
      ? filteredPermissions?.manage
      : section === 'customFields'
      ? filteredPermissions?.customFields
      : section === 'createAndDelete'
      ? filteredPermissions?.createAndDelete
      : filteredPermissions?.team;
    trackBy: trackById
  "
>
  {{ item }}
</div>

Output (note the trackBy: trackById ; track item at the end):

@for ( item of section === 'manage' ? filteredPermissions?.manage : section ===
'customFields' ? filteredPermissions?.customFields : section ===
'createAndDelete' ? filteredPermissions?.createAndDelete :
filteredPermissions?.team; trackBy: trackById ; track item) {
<div>
  {{ item }}
</div>
}

Expected output:

@for ( item of section === 'manage' ? filteredPermissions?.manage : section ===
'customFields' ? filteredPermissions?.customFields : section ===
'createAndDelete' ? filteredPermissions?.createAndDelete :
filteredPermissions?.team; track trackById($index, item)) {
<div>
  {{ item }}
</div>
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

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

Angular CLI: 17.0.5
Node: 20.9.0
Package Manager: pnpm 8.12.0
OS: darwin arm64

Angular: 17.0.6+sha-1c55c49
... core

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1700.6
@angular-devkit/build-angular       17.0.5
@angular-devkit/core                17.0.5
@angular-devkit/schematics          17.0.5
@angular/animations                 17.0.5
@angular/cdk                        17.0.1
@angular/cli                        17.0.5
@angular/common                     17.0.5
@angular/compiler                   17.0.5
@angular/compiler-cli               17.0.5
@angular/elements                   17.0.5
@angular/forms                      17.0.5
@angular/google-maps                15.2.9
@angular/language-service           17.0.5
@angular/localize                   17.0.5
@angular/platform-browser           17.0.5
@angular/platform-browser-dynamic   17.0.5
@angular/router                     17.0.5
@angular/service-worker             17.0.5
@schematics/angular                 17.0.5
ng-packagr                          17.0.2
rxjs                                7.8.0
typescript                          5.2.2
webpack                             5.88.2
zone.js                             0.14.2

Anything else?

This was using the latest build of @angular/core via "@angular/core": "angular/core-builds#17.0.6+1c55c49"

Metadata

Metadata

Assignees

Labels

area: migrationsIssues related to `ng update`/`ng generate` migrationscore: control flowIssues related to the built-in control flow (@if, @for, @switch)

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions