Autocomplete -> nz-auto-optgroup -> dont work with new angular control flow (@for)

[Lavos96]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-w1gcxk?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

Listing nz-autocomplete elements does not work if we use the new control-flow from Angular (i.e. @for syntax) and group options using nz-auto-optgroup tag. The old syntax works without problems (i.e. *ngFor)

What is expected?

New sytax will work.

What is actually happening?

New syntax dont work.

Environment	Info
ng-zorro-antd	17.1.0
Browser	Chrome 121.0.6167.185

[ParsaArvanehPA]

Hi @Lavos96 , Your stackblitz link is broken; can you provide another one?

[Lavos96]

Hi @ParsaArvanehPA This link should work: https://stackblitz.com/edit/ng-zorro-antd-ivy-w1gcxk?file=src%2Fapp%2Fapp.component.ts

[Nicoss54]

@Lavos96 after investigating a little bit, it seems it's not a problem with Ng Zorro itself

Here is your code with the older way

<nz-auto-option
                              *ngFor="let option of groups.groups"
                                [nzLabel]="option.name"
                                [nzValue]="option.id">
                                {{ option.name }}
                            </nz-auto-option>

if you want to migrate to new code flow syntax you should migrate like this

@for (option of groups.groups; track option.id) {
                            <nz-auto-option
                                [nzLabel]="option.name"
                                [nzValue]="option.id">
                                {{ option.name }}
                            </nz-auto-option>
                    }

if you do that you exemple work as expected

[Lavos96]

@Nicoss54 after long investigation, it turned out that angularCompilerOptions -> preserveWhitespaces: true option in tsconfig.json is responsible for that. I was unable to reproduce that in stackblitz. There is an reported issue in angular repo for that: https://github.com/angular/angular/issues/54077