to change the tab index of mat-stepper using output


April 2019


20 time


i am using mat-stepper for my view and in each mat-step there is a component with form. when my form gets submitted i am passing an event using @output and receiving in parent component and incrementing the index of mat-stepper using but it is now incrementing for the first time it is remaining same but for the second time it is working fine

HTML file

<mat-horizontal-stepper linear #stepper>
    <mat-step [completed]="false" label="Create Product Storage Location" [stepControl]="locationForm">
        <app-add-location (notify)='getLocationForm($event)'></app-add-location>
    <mat-step [completed]="false" label="Add Single or Multiple Products" [stepControl]="productForm">
        <app-add-product (notify)='getProductForm($event)'></app-add-product>
        <ng-template matStepLabel>Done</ng-template>
        <p>your product is created successfully !!</p>

typescript function

@ViewChild('stepper') myStepper: MatStepper;
getLocationForm(formGroup: FormGroup): void {
    this.locationForm = formGroup;
    if(this.locationForm.status == "VALID"){
      console.log('selected index is after', this.myStepper.selectedIndex)

I want to change the tab index and show the next tab to be active.

0 answers