How to complete a Material Stepper Step, and continue to next step?

0
votes

I have a an Angular Material Stepper with 3 steps.

The steps are marked as complete=false so that you cannot go to the next step until they are complete.

However, if I mark a step as complete, stepper.next seems to go to an indeterminate state.

Example: https://stackblitz.com/edit/angular-oyeqzm?file=src%2Fapp%2Fstepper-states-example.ts

It's like the stepper is not "refreshed" to know about the completed status of a step.

Any thoughts?

1
angularangular-materialangular-material-stepper

1 Answers

0
votes

I'm not an expert but it does seem like the DOM with the *ngFor loop isn't refreshing fast enough for this.stepper.next(); to take effect.

The above stackblitz works if I wrap it in a SetTimeout:

        setTimeout(() => {
            this.stepper.next()
        }, 1);

I'm putting this as an answer but would welcome if anybody knew of a better way