angular - om de tabindex van mat-stepper te wijzigen met output

Ik gebruik mat-stepper voor mijn view en in elke mat-stap is er een component met vorm. Wanneer mijn formulier wordt ingediend, geef ik een event door met @output en ontvang ik in de oudercomponent en verhoog ik de index van mat-stepper met stepper.next(), maar als ik probeer het formulier voor first in te dienen, kan de component stepper zijn tabblad niet wijzigen. Bij de tweede poging werkt het en verandert de tab. HTML-bestand

<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-functie

@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)
    }
  }

Ik wil de tabvolgorde wijzigen en de volgende tab actief laten zien.