SelectedIndex не назначен в angular шагового материала

Question

Я использую angular материал степпера. Я беру данные из бэкэнда и в соответствии с этими данными я должен установить указанный c шаг. Я использую директиву [selectedIndex], но selectedIndex не применяется к значению, которое я передаю. setTimeout я пробовал, у меня не работает. SelectedIndex равно 0. Почему selectedIndex не применяется к currentStep? И как это исправить?

    <mat-horizontal-stepper
    #stepper
    [selectedIndex]="currentStep"
    [linear]="true"
>
    <mat-step #step1 [completed]="step1.interacted || 0 < currentStep" [stepControl]="stepConfirmation.formGroup">
        <ng-template matStepLabel>Contact Info</ng-template>
        <fo-new-customer-confirmation-info #stepConfirmation></fo-new-customer-confirmation-info>
    </mat-step>
    <mat-step #step2 [completed]="step2.interacted || 1 < currentStep" [stepControl]="stepBusiness.formGroup">
        <ng-template matStepLabel>Business Info</ng-template>
        <fo-new-customer-business-info #stepBusiness></fo-new-customer-business-info>
    </mat-step>
    <mat-step #step3 [completed]="step3.interacted || 2 < currentStep" [stepControl]="stepApplicant.formGroup">
        <ng-template matStepLabel>Applicant Info</ng-template>
        <fo-new-customer-applicant-info #stepApplicant></fo-new-customer-applicant-info>
    </mat-step>
    <mat-step #step4 [completed]="step4.interacted || 3 < currentStep" [stepControl]="stepFinancial.formGroup">
        <ng-template matStepLabel>Financial Review</ng-template>
        <fo-new-customer-financial-review-info #stepFinancial></fo-new-customer-financial-review-info>
    </mat-step>
</mat-horizontal-stepper>
<footer class="row">
    {{stepper.selectedIndex}}
    <div>
        <button
            mat-button
            mat-flat-button
            *ngIf="stepper.selectedIndex !== 0"
            (click)="preview()"
            color="accent">
            Previous
        </button>
        <button
            class="mb-3 mb-sm-0 ml-auto"
            mat-button
            mat-flat-button
            color="primary"
            [ladda]="isDataUploading"
            *ngIf="stepper.selectedIndex !== stepper.steps?.length-1"
            (click)="next()">
            Next
        </button>
    </div>
</footer>

---

export class NewCustomerStepperComponent implements AfterViewInit {
    public stepperManager: StepperManager = {
        steps: {
            [StepperState.ContactInfoOrganic]: {
                control: null,
            },
            [StepperState.BusinessInfoOrganic]: {
                control: null,
            },
            [StepperState.ApplicantInfoOrganic]: {
                control: null,
            },
            [StepperState.FinancialReviewOrganic]: {
                control: null,
            },
        },
    };
public currentStep: number;
    public emptyGuid: string = '00000000-0000-0000-0000-000000000000';
    public isStepperStateWasChanged: boolean = false;
    public isDataUploading: boolean = false;
    @ViewChild('stepper', {static: true})
    public stepper: MatStepper;

    @ViewChild('stepConfirmation', {static: true})
    public stepConfirmationInfo: NewCustomerConfirmationInfoComponent;

    @ViewChild('stepBusiness', {static: true})
    public stepBusinessInfo: NewCustomerBusinessInfoComponent;

    @ViewChild('stepApplicant', {static: true})
    public stepApplicantInfo: NewCustomerApplicantInfoComponent;

    @ViewChild('stepFinancial', {static: true})
    public stepFinancialInfo: NewCustomerFinancialReviewInfoComponent;

    constructor(
        private readonly notificationService: NotificationService,
        private readonly formService: FormService,
        private readonly dataService: NewCustomerFormStepperDataService,
        private readonly authService: AuthService,
        private readonly navigationService: NavigationService,
    ) {
    }

    public ngAfterViewInit(): void {
        this.stepperManager.steps[StepperState.ContactInfoOrganic].control
            = this.stepConfirmationInfo;
        this.stepperManager.steps[StepperState.BusinessInfoOrganic].control
            = this.stepBusinessInfo;
        this.stepperManager.steps[StepperState.ApplicantInfoOrganic].control
            = this.stepApplicantInfo;
        this.stepperManager.steps[StepperState.FinancialReviewOrganic].control
            = this.stepFinancialInfo;
            this.redirectAccordingToStatus();

    }

    // public onStepChange(event: StepperSelectionEvent): void {
    //  // if (!this.isStepperStateWasChanged) {
    //  //  this.isStepperStateWasChanged = true;
    //  //  return;
    //  // }
    //  event.selectedStep.interacted = false;
    //  this.loadStepDataById(event.selectedIndex);
    // }

    public preview(): void {
        this.stepper.previous();
    }

    public next(): void {
        if (this.formService.isFormValid(
            this.stepperManager.steps[this.stepper.selectedIndex].control.formGroup)
        ) {
            this.isDataUploading = true;
            this.stepperManager.steps[this.stepper.selectedIndex].control
                .submit()
                .pipe(
                    take(1),
                )
                .subscribe(
                    () => {
                        this.isDataUploading = false;
                        this.stepper.next();
                        this.loadStepDataById(this.stepper.selectedIndex);
                    },

                );
        }
    }

    public setStepper(index: number): void {
        this.currentStep = index;
        this.stepper.selectedIndex = this.currentStep;
        this.loadStepDataById(index);

    }

    private mapLeadStatusToStepperState(status: LeadStatusRequest): number {
        return StepperState[status.value];
    }

    private loadStepDataById(id: number): void {
        this.stepperManager.steps[id].control
                .getData();
    }

    private getStatus(): Observable<LeadStatusRequest> {
        return this.dataService
            .getStatus()
            .pipe(
                take(1),
            );
    }

    private redirectAccordingToStatus(): void {
        this.getStatus()
            .subscribe(
                status => {
                    const id: number = status.id;

                    switch (id) {
                        case NewCustomerStatus.ContactInfoOrganic:
                        case NewCustomerStatus.BusinessInfoOrganic:
                        case NewCustomerStatus.ApplicantInfoOrganic:
                        case NewCustomerStatus.FinancialReviewOrganic:
                            this.currentStep = this.mapLeadStatusToStepperState(status);
                            this.setStepper(this.currentStep);
                            break;

                        default:
                            this.navigationService.navigateToErrorPage();
                    }
                },

            );
    }

}