While working with the Angular 8 Material Stepper, I am validating form states and setting stepCompleted to true when the conditions pass.
You can view a demo of this functionality on Stackblitz: https://stackblitz.com/edit/angular-mat-stepper-demo-with-fields?file=src%2Fapp%2Fapp.component.html
The issue arises when Angular does not immediately recognize the state change, requiring us to click 'next' twice. Only on the second click does it register the updated state.
Furthermore, even if we go back to the previous step and modify parameters to prevent progression, Angular still allows the step to proceed on the first click because it retains that stepCompleted is true. It only updates to false after returning to that step again.
To address this, I believe an appropriate solution is to inject ChangeDetectorRef and trigger it in the following manner:
stepComplete() {
//Check if the step is complete
//If so
this.stepCompleted = true;
this.cd.detectChanges();
}
What are your thoughts on this approach?