2

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?

MDave
  • 1,245
  • 13
  • 29

2 Answers2

1

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

MDave
  • 1,245
  • 13
  • 29
0

To access Stepper from ts file in Angular, then put 2 button Next and Previous with function.

nextStep(stepper: MatStepper) {
    setTimeout(() => {
      stepper.next();
    }, 0);
  }

  preivousStep(stepper: MatStepper) {
    setTimeout(() => {
      stepper.previous();
    }, 0);
  }

MatStepper is provided from angular material , if Error comes then import its Module in module file.

You need to put Settimeout because if *ngFor is applying in the DOM then you need to click 2 times to go to next step.

I apply this , then its works perfectly.

Hope you all Like it,

> Thanks!!!

Vaman Patel
  • 9
  • 2