Horizontal stepper error : Expression has changed after it was checked. Previous value: 'stepControl: undefined'. Current value: 'stepControl: [object Object]'

[Arun Wadikar]

HI All,

I got below error on below action.

Action: while initializes the first step of stepper.

Error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'stepControl: undefined'. Current value: 'stepControl: [object Object]'

This console error is not breaking the UI but need to remove this as this is not the good practice

Angular version.

----------------

 "@angular/material": "^8.2.3"

 "@angular/cli": "^8.3.9",

 

 Code Snippet:

 -------------

    <mat-horizontal-stepper [linear]="true" #stepper labelPosition="bottom">

      <ng-template matStepperIcon="edit">

        <mat-icon>done</mat-icon>

      </ng-template>

      <mat-step [stepControl]="firstStepComponent.firstFormGroup">

        <ng-template matStepLabel class="mat-step-label">First Step</ng-template>

        <div class="wizard-container">

          <div class="wizard-heading">First Step</div>

          <div class="wizard-content">

            <app-first-step [source]="test.source" (resetFunction)="restFunction()"

              (afterSelection)="save($event)" (goToNextStep)="nextStep()">

            </app-first-step>

          </div>

        </div>

      </mat-step>

      <mat-step [stepControl]="secondStep.secondGroupWrapper" [optional]="isOptional">

        <ng-template matStepLabel class="mat-step-label">Second Step</ng-template>

        <div class="wizard-container">

          <div class="wizard-heading">

            <div>Second Step <span class="optional" *ngIf="isOptional">(Optional)</span></div>

          </div>

          <div class="wizard-content">

            <app-second-step [selectedFilters]="test.filter" [source]="test.source"

              (resetData)="resetData($event)"></app-second-step>

          </div>

        </div>

      </mat-step>

</mat-horizontal-stepper>

 

Thanks

[A B]

I had the same error a couple of days ago with a mat-table fed by an observable. Fortunately my client decided to go ng-bootstrap so I didn't have to investigate this

/A