изменить индекс вкладки mat-stepper используя выход

Question

Я использую мат-степпер для моего взгляда, и в каждом шаге мат есть компонент с формой.когда моя форма отправляется, я передаю событие с помощью @output и получаю в родительском компоненте и увеличиваю индекс mat-stepper с помощью stepper.next (), но когда я пытаюсь отправить форму для первого внутри компонента, степпер не можетизменить свою вкладку.со второй попытки он работает и вкладка меняется.HTML-файл

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

функция машинописи

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

Я хочу изменить индекс вкладки и показать следующую вкладку активной.