mat-stepper positioning - what is the right moment to call position method

Question

My application uses mat-stepper to go through the questionnaire. The only problem I got is positioning stepper when user clicks "continue where you left" button. I can get the correct position from DB and set stepper position "manually" (by clicking a button). However I'd like to call this positioning method on init of the component or rather the way after init because my stepper is not available neither of those states: OnInit, AfterViewInit, AfterContentInit.

Here is the component init method:

ngOnInit(): void {
        this.activatedRoute.paramMap.subscribe(params => {
            const schemeId = params.get('id');
            const applicationId = params.get('applicationId');
            if (applicationId) {
                // @ts-ignore
                this.getData(this.customerId, schemeId, applicationId).subscribe(res => {
                    this.sme = res[0];
                    this.scheme = res[1];
                    this.application = res[2];
                    this.scheme.sections?.forEach(section => {
                        this.completedSteps.push(false);
                    });
                    this.dataLoaded = Promise.resolve(true);
                });
            } else {
                // @ts-ignore
                this.getData(this.customerId, schemeId, null).subscribe(res => {
                    this.sme = res[0];
                    this.scheme = res[1];
                    this.scheme.sections?.forEach(section => {
                        this.completedSteps.push(false);
                    });
                    this.dataLoaded = Promise.resolve(true);
                });
            }
            this.progressService.appStared.subscribe(isStarted => this.isStarted = isStarted);
            this.progressService.toggleStartApplication(true);
        });
    }

and here is the html content:

    <div class="card card-no-border">
    <app-alt-page-header [title]="'Eligibility Application for Liquidity Loan for Small/Medium Business'" [isApplicationStarted]="true" [showSaveButton]="true"></app-alt-page-header>
    <div class="float-container">
        <button class="btn btn-sbci-solid" (click)="setStepper()">Position Stepper</button>
        <div class="float-child-left left">
            <mat-stepper #stepper orientation="vertical" id="scheme-stepper" (selectionChange)="selectionChange($event)" *ngIf="dataLoaded | async; else loading"> <!-- linear="true" -->
<!-- TODO: icons moves around, do not keep in the middle -->
                <ng-template matStepperIcon="edit">
                    <mat-icon>create</mat-icon>
                </ng-template>
                <ng-template matStepperIcon="done">
                    <mat-icon>done</mat-icon>
                </ng-template>
                <ng-template matStepperIcon="number">
                    <mat-icon>radio_button_checked</mat-icon>
                </ng-template>

                <mat-step *ngFor="let section of scheme.sections">
                    <ng-template matStepLabel><h6>{{section.name}}</h6></ng-template>
                </mat-step>
            </mat-stepper>
        </div>

        <div class="float-child-right right">
            <div class="container-fluid" *ngIf="dataLoaded | async; else loading">
                <app-before-get-started *ngIf="selectedStepIndex==0" [stepper]="stepper" [application]="application" (completed)="onStepCompleted($event)"></app-before-get-started>
                <app-sector-and-nace *ngIf="selectedStepIndex==1" [stepper]="stepper" [application]="application"(completed)="onStepCompleted($event)"></app-sector-and-nace>
                <app-business-eligibility *ngIf="selectedStepIndex==2" [stepper]="stepper" [application]="application" (completed)="onStepCompleted($event)"></app-business-eligibility>
                <app-previous-state-aid *ngIf="selectedStepIndex==3" [stepper]="stepper" (completed)="onStepCompleted($event)"></app-previous-state-aid>
                <app-funding-details *ngIf="selectedStepIndex==4" [stepper]="stepper" [application]="application" (completed)="onStepCompleted($event)"></app-funding-details>
                <app-business-details-overview *ngIf="selectedStepIndex==5" [stepper]="stepper" [application]="application" (completed)="onStepCompleted($event)"></app-business-details-overview>
                <app-contact-preferences *ngIf="selectedStepIndex==6" [stepper]="stepper" (completed)="onStepCompleted($event)"></app-contact-preferences>
                <app-review-and-submit *ngIf="selectedStepIndex==7" [stepper]="stepper" (completed)="onStepCompleted($event)"></app-review-and-submit>
                <app-get-eligibility-code *ngIf="selectedStepIndex==8" [stepper]="stepper" (completed)="onStepCompleted($event)"></app-get-eligibility-code>
            </div>
        </div>
    </div>
</div>

<ng-template #loading>
    <ul class="collapse list-unstyled" id="loading">
        <li>Loading Application Details...</li>
    </ul>
</ng-template>

now, this line inside OnInit:

this.dataLoaded = Promise.resolve(true);

causes that my stepper is not available on any of the init methods. How to make the following method to run automatically

// TODO: how to call this after everything is really ready
    setStepper() {
        if (this.application.currentSection) {
            this.selectedStepIndex = this.application.currentSection;
            for (let i = 0; i < this.application.currentSection; i++) {
                this.stepper.next();
            }
            this.stepper.selectedIndex = this.selectedStepIndex;
            console.log(this.stepper.selectedIndex);
        }
    }

when dataLoaded variable is actually true.

dataLoaded: Promise<boolean> | undefined;