to change the tab index of mat-stepper using output

Refresh

April 2019

Views

20 time

2

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 stepper.next() 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>
    <mat-step [completed]="false" label="Add Single or Multiple Products" [stepControl]="productForm">
        <app-add-product (notify)='getProductForm($event)'></app-add-product>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        <p>your product is created successfully !!</p>
        <div>
        </div>
    </mat-step>
</mat-horizontal-stepper>

typescript function

@ViewChild('stepper') myStepper: MatStepper;
getLocationForm(formGroup: FormGroup): void {
    this.locationForm = formGroup;
    if(this.locationForm.status == "VALID"){
      this.myStepper.next()
      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