Wizard step lazy loading

[adrianbenjuya]

Hi, is there a way to lazy load components inside a wizard-step?

For example, I have 2 wizard-step each one with a custom component inside. The first time that the wizard shows in the screen, those 2 components call the ngOnInit() function. Instead I need the second component to initialize just when the user reaches the second step.

Meanwhile I'm hadling this by using a *ngIf in every component with an index that stores the current step, but I believe this is a feature that must come with the wizard itself, isn't it?

[madoar]

ng2-archwizard currently doesn't support lazy step loading. I guess you could use (stepEnter) to set a trigger, which you can afterwards check with *ngIf inside your step definition.

I'm not sure if this is a feature ng2-archwizard needs to support out of the box, because:

• I don't believe too many people need this
• I'm not really sure how to implement this out of the box (I know this is not really a reason against it)

If you know how to extend ng2-archwizard with lazy step loading, feel free to submit a new PR!

[AbhijitMuke]

@adrianbenjuya @madoar *ngIf in every component with an index that stores the current step, works perfectly fine for lazy loading purpose.

But, I have to remove *ngIf condition from first step in order to avoid below error -

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked… Previous value: 'ngIf: false'. Current value: 'ngIf: true'

*ngIf also create problem while dynamically changing step where every component is written in *ngIf.

is there any way to get rid of this ?

[madoar]

The issue is the phase during which you "set" the condition which you pass to ngIf. You need to ensure that this is done in the correct angular lifecycle phase, see also https://angular.io/guide/lifecycle-hooks

[mustafakunwa]

@adrianbenjuya @madoar *ngIf in every component with an index that stores the current step, works perfectly fine for lazy loading purpose.

But, I have to remove *ngIf condition from first step in order to avoid below error -

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked… Previous value: 'ngIf: false'. Current value: 'ngIf: true'

*ngIf also create problem while dynamically changing step where every component is written in *ngIf.

is there any way to get rid of this ?

+1

[adrianbenjuya]

@mustafakunwa @AbhijitMuke I haven't used this component for a long time, I just moved to Material's stepper

[mustafakunwa]

I want to load may active stepper component once it is activated. In material stepper all load at once

[theCrius]

@mustafakunwa @AbhijitMuke I haven't used this component for a long time, I just moved to Material's stepper

Not really a useful reply isn't it? "I've moved to an entire different framework to get a wizard component".

[is-tongben]

使用*ngIf条件语句来进行延迟加载吧 ,如果加载后显示的步骤不对，可以使用wizard.goToStep(stepIndex);或者 wizard.goToNextStep() 进行控制 或者混合使用 我昨天遇到一个问题 是ajax数据返回后在加载这个组件 但是步骤会跑到最后一步 最后通过下面这个方式解决:

this.onLoad = true; //这里是条件判断 当ajax数据返回后 onLoad置为true加载组件
this.wizard.goToStep(0);
setTimeout(() => {
    this.wizard.goToNextStep();//这里用goToStep也可以
},0}

[khocef]

Hi, is there a way to lazy load components inside a wizard-step?

For example, I have 2 wizard-step each one with a custom component inside. The first time that the wizard shows in the screen, those 2 components call the ngOnInit() function. Instead I need the second component to initialize just when the user reaches the second step.

Meanwhile I'm hadling this by using a *ngIf in every component with an index that stores the current step, but I believe this is a feature that must come with the wizard itself, isn't it?

+1 i have the same requirement

[leonardomaier]

Same problem here, it would be nice to have this feature.

[Sameer235711]

This approach worked well for me

1. Used *ngIf on the content inside of each step instead of the step itself.
2. Gave each step an ID and used it in the *ngIf statements

Example:

<aw-wizard #wizard>
    <aw-wizard-step stepId="<step-id-1>" stepTitle="<step-title-1>">
        <component-1 *ngIf="wizard.currentStep?.stepId === '<step-id-1>'">
        </component-1>
    </aw-wizard-step>

    <aw-wizard-step stepId="<step-id-2>" stepTitle="<step-title-2>">
        <component-2 *ngIf="wizard.currentStep?.stepId === '<step-id-2>'">
        </component-2>
    </aw-wizard-step>
</aw-wizard>