MatStepper change step programatically

[sskhokhar]

Bug, feature request, or proposal:

There must be an API to change step programatically in stepper

What is the expected behavior?

I have a form in linear stepper and the final step is to publish the form. After publishing, I reset the form groups but there must be a way to reset the stepper to its first step.

What is the current behavior?

Current after publishing there is not way to reset stepper to its first step.

[josephperrott]

Closing as this functionality already exists.

You are able to set the selected step using the selectedIndex or selected inputs on the Stepper component that you are resetting.

[willshowell]

@josephperrott is there an issue tracking documentation for this? Maybe it isn't clear from https://material.angular.io/components/stepper/api that you can also use all the methods and properties in https://material.angular.io/cdk/stepper/api

[ganqqwerty]

it's indeed not clear at all how to do that and how to access the stepper objects in a first place

[ndjathe-master]

For someone having the same issue, I have found a workaround by hiding the matStepperNext button, and click it in the method.

In the template
<button mat-button matStepperNext style="display: none" id="registerStep">Next</button>

In the method
document.getElementById('registerStep').click();

[jujyfruits]

@ndjathe-master actually you do not need this workaround, use selectedIndex input property of mat-horizontal-stepper component.

Template <mat-horizontal-stepper [selectedIndex]="stepperIndex">

Method this.stepperIndex = desiredIndex;

https://material.angular.io/cdk/stepper/api

[hevans90]

@ndjathe-master actually you do not need this workaround, use selectedIndex input property of mat-horizontal-stepper component.

Template <mat-horizontal-stepper [selectedIndex]="stepperIndex">

Method this.stepperIndex = desiredIndex;

https://material.angular.io/cdk/stepper/api

This only works for steppers with [linear]="false" - in material 7.1.

UPDATE: To make this work with [linear]="true", use a setTimeout function with 0 delay:

setTimeout(() => {
  this.stepper.selectedIndex = 2;
});

I think this is due to some low level event-loop stuff, and how Angular's change detection works.

[BearandYoon]

@hevans90
I have some issue with [linear]="true", I tried to use setTimeout func with 0 delay but it doesn't work for me.
Do you have any other solution?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}