Angular 17 @for directive not working with Stepper

[dalvarez-opt]

I have recently started using Primeng, latest version, and trying to use new component https://primeng.org/stepper.

If I write fixed html, it renders ok, but when I try to render panels dynamically, it doesn't work.

I've tryed using old *ngFor in p-stepperPanel label, I have tryed using ng-container *ngFor and inside this a p-stepperPanel, I've used new angular @for {}, and nothing works. StepperPanels are not being rendered and I only see empty bindings:

Have a loot at code:

Any help would be appreciated

[dalvarez-opt]

Hi all.

I have added a ElementRef to my component.ts and I can see stepperPanels are being added to stepper:

But nothing is being rendered to html.

Any ideas?

[dalvarez-opt]

Adding @if at the start of the HTML solved the issue.

[subcero123]

Could you provide the corrected code? I'm facing the same issue

[dalvarez-opt]

Yes, simply add a @if annotation, so the for loop only fires when steps have been loaded in component.ts: