ExpressionChangedAfterItHasBeenCheckedError when using *ngFor on wizard Step

[aishwaryagarg]

Getting following error when I tried to use *ngFor on wizard Step.
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
Please help!

[madoar]

I need a bit more information to help you.
Which version of ng2-archwizard are you using? Where does the error occur (did you get any line information)? How does your code look like?

[aishwaryagarg]

I am using 1.7.0 version.
Please have a look on code below-

<wizard> <wizard-step title="demo" *ngFor="let wizard of field.wizardSteps"> Content of Step 1 <button type="button" nextStep>Next Step</button> <button type="button" goToStep="2">Go directly to third Step</button> </wizard-step> </wizard>

[aishwaryagarg]

Please let me know If you need some more information

[madoar]

Can you please also add your typescript code, belonging to the snippet?
Ideally it would be nice to have a working code sample that produces your described error.

[aishwaryagarg]

I just followed you documentation, It works fine untill all wizardsteps are seprate, But as soon as I have added ngFor this issue generates.
my array has a very simple structure
wizardSteps = [ {"title": "abc", "title": "pqr", "title": "xyz" } ]

[madoar]

It looks to me like you're creating the wizardSteps wrong, because you're only creating a single json object inside with three title fields.
Sadly I haven't found the time yet to test *ngFor in combination with the wizard steps yet.
It would be best if you could provide a fully executable sample that produces your described error during runtime.

[scozma]

I have the same issue, which seems to be a feature of Angular (and not a bug) in dev mode.
I don't know what causes it when using *ngFor with ng2-archwizard, but calling enableProdMode( ) when bootstrapping the app prevents the exception from being thrown. So this means the problem will appear only on dev mode. Some guys say something about using a setTimeout, but it was not the case for me. You can find more here:
angular/angular#6005

[madoar]

@scozma thank you for telling us how to solve the problem!
I've done some tests too and also stumbled over the previously stated error.
I believe that to solve this problem in a more clean way it's required to improve the lifecycle hocks used in ng2-archwizard.

This currently has no high priority for me.
In addition please use ngFor with caution in combination with the wizard steps! The reason being, that if you insert a new step before the currently entered step, the wizard will have a corrupted state, because the current step index isn't automatically updated and a not completed step is inserted.

[scozma]

Here is a solution for still working on dev mode:

import { ChangeDetectorRef } from '@angular/core';

constructor(private _changeDetectionRef : ChangeDetectorRef} { }

ngAfterViewInit() : void {
    // Force another change detection in order to fix the dialog error
    this._changeDetectionRef.detectChanges();
}

[madoar]

@scozma where should this code be inserted?

[scozma]

@madoar - On the dialog's component (the component for the view which has "<wizard-step *ngFor=...")

[madoar]

@scozma do you want to provide an example for this in the demo repository (https://github.com/madoar/ng2-archwizard-demo) and submit a PR?

[scozma]

@madoar - Do you know why I am getting this error while trying to push the changes?

$ git push origin fix-for-ngFor
remote: Permission to madoar/ng2-archwizard-demo.git denied to scozma.
fatal: unable to access 'https://github.com/madoar/ng2-archwizard-demo.git/': The requested URL returned error: 403

[madoar]

@scozma you need to create a fork of the project first (https://help.github.com/articles/fork-a-repo/).
Afterwards you can push to your fork and open a new PR to the main repository.

[scozma]

@madoar - Thanks! I didn't know I had to fork first. I created the PR:
madoar/angular-archwizard-demo#13
Please let me know if it's ok. Thanks!