PrimeNG: Is p-steps the right choice over p-stepper when using SpreadJS in a wizard?

I am working on an Angular (v17) project with PrimeNG 17.

We have a wizard where each step is a separate Angular component. Some steps include SpreadJS, which needs to handle large datasets.

Currently, I am using p-steps with a router-outlet in the parent component so that each step is loaded dynamically. This way, when I revisit a step, the SpreadJS component is re-rendered.

I was told to use p-stepper instead, but as I understand, p-stepper keeps components mounted inside its panels, so SpreadJS won’t re-render when navigating back.

From my testing, I feel like p-steps is the better option here because it reloads SpreadJS on revisit.

Question


Am I correct in using p-steps for this scenario instead of p-stepper?
Or is there something I’m missing about how they actually work with child components like SpreadJS?

I am sharing my code here in the bottom.

/*This is common for both stepper and steps*/

{
path: 'manage-items',
redirectTo: 'item-list',
pathMatch: 'full'
},
{
path: 'manage-items/:item_id',
loadChildren: () =>
import('./components/items/item-wizard.routes')
.then((m) => m.itemWizardRoutes),
data: { mode: 'EDIT' }
},

export const itemWizardRoutes: Routes = [
{
path: '',
component: ItemWizardComponent,
children: [
{ path: '', redirectTo: 'step-one', pathMatch: 'full' },
{ path: 'step-one', component: StepOneComponent, data: { step: 'step-one' } },
{ path: 'step-two', component: StepTwoComponent, data: { step: 'step-two' } },
{ path: 'step-three', component: StepThreeComponent, data: { step: 'step-three' } },
{ path: 'step-four', component: StepFourComponent, data: { step: 'step-four' } }
]
}
];


<!-------------code of p-steps------------->
<div class="row mx-0">
<div class="col-md-8">
<div class="custom-stepper-section">
<p-steps
class="mystepper"
styleClass="step-active"
[activeIndex]="activeStepIndex"
[model]="wizardSteps"
[readonly]="true">
</p-steps>
</div>
</div>

<router-outlet></router-outlet>
</div>
<!-------------code of p-steps------------->

<!-------------code of p-stepper------------->

<p-stepper
[(activeStep)]="activeStepIndex"
class="custom-stepper customclass"
[linear]="true">

<p-stepperPanel [header]="wizardSteps[0]?.label">
<ng-template pTemplate="content" let-index="index">
<app-step-one></app-step-one>
</ng-template>
</p-stepperPanel>

<p-stepperPanel [header]="wizardSteps[1]?.label">
<ng-template pTemplate="content" let-index="index">
<app-step-two></app-step-two>
</ng-template>
</p-stepperPanel>

<p-stepperPanel [header]="wizardSteps[2]?.label">
<ng-template pTemplate="content" let-index="index">
<app-step-three></app-step-three>
</ng-template>
</p-stepperPanel>

<p-stepperPanel [header]="wizardSteps[3]?.label">
<ng-template pTemplate="content" let-index="index">
<app-step-four></app-step-four>
</ng-template>
</p-stepperPanel>

</p-stepper>
<!-------------code of p-stepper------------->

Continue reading...