Dinamically add steps progressbar layout problem.

[vinicius]

Hi all,
I'm trying to include steps dinamically, using stepper componenet, everything works fine, but, i have this layout problem with the progress bar.


as you can see, the progress bar don't follow the layout when i add more steps in real time.
Just for explanations, this layout starts with 2 steps, and user can add more steps.

[Zornitsa]

Hi Vinicius,

Thank you for the provided screenshot.

To add steps dynamically to the Stepper component, the developer needs to also update the reference of the steps collection after adding the new steps in order to properly reflect the changes in the view. This can be achieved with the spread operator (...) for example:

public addStep(): void {
    this.steps.push({ label: 'Attachments' });
    this.steps = [...this.steps];
}

For a demonstration of the above approach, please refer to the following StackBlitz example:

• https://stackblitz.com/edit/angular-upagdg 

A more detailed explanation regarding reflecting the changes in the view after manually updating the data of a Kendo UI for Angular component can be found in the following Knowledge Base article from our documentation:

•  https://www.telerik.com/kendo-angular-ui/components/knowledge-base/refresh-data-manually-update-view/ 

I hope this helps.

Regards,
Zornitsa
Progress Telerik

[vinicius]

It worked perfectly, thanks.