ViewChild with Stepper ExpressionChangedAfterItHasBeenCheckedError Angular 8

Question

I'm trying to use ViewChild to get a child component's attribute for the Stepper [completed] property, but I can't figure out how to fix the "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'completed: null'. Current value: 'completed: false'".

I followed this answer: Angular Material Stepper Component For Each Step

parent component .ts
@ViewChild(FirstStepComponent, {static: false}) firstStepComp: FirstStepComponent;

get firstStepCompleted() {
    return this.firstStepComp ? this.firstStepComp.completed : null;
}

parent component .html
<mat-step [completed]="firstStepCompleted">
  <app-first-step>
  </app-first-step>
</mat-step>

in the child component .ts
completed: boolean = false;

Answer 1

Before all I have to tell you that this error is thrown only in dev mode. If you call enableProdMode() when bootstrapping the app, it won't get thrown. This doesnt happens mainly in dev mode because after every save angular will run its rounds of changeDetection cycles and with it double checks the bindings of it weather if it has changed from the initial.

Key Idea : Anything that changes a bindings needs to go through a cycle of changeDetection

For furthermore elaboration on this issue please go through @drew moore's answer here.