Data is not getting binded to the modal - html

Question

Thank you for reading this question.
Iam opening the modal from typescript code after some API success reponse.
It is binding normally after taking more time eventhough if iam not using timer.
Main thing is that if I inspect it wil show the modal data (dont know may be becouse scroll or refresh) and even if i wont mention timer also it wil bind very next after i inspect.
i just wanted to clarify i have used timer becouse after i inspect may be a scroll or refresh it was binding suddenly, i thought may be a symultaneous process of value assgn and opening a modal.
This my html
<div style="display: none">
<button class="primary" #myModalSuccess data-target="#myModalSuccess" data-toggle="modal"
style="cursor: pointer;">Delete</button>
<div id="myModalSuccess" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" *ngIf="checkOutConfFromRazor">
<div class="modal-header">
<button type="button" (click)="checkSubscriptionAndInvitee()" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="text-center"><img style="height: 80px; " src="assets/img/dashboard/check_circle.svg"></div>
<div class="modal-body">
<h4 class="text-center primary">Payment successful</h4>
<p class="text-center location-text ">Your payment has been proccessed! <br>Details of your transaction are
listed below.
</p>
<div class="ver-divider"></div>
<div class="hor-line"></div>
<div class="ver-divider"></div>
<p class="text-center primary">Transaction ID : <span
class="text-right">{{checkOutConfFromRazor?.id}}</span> </p>
<div class="ver-divider"></div>
<div class="row">
<div class="col">
<label>Transaction Amount</label>
</div>
<div class="col text-right">
<label> {{checkOutConfFromRazor?.amount | slice:0:checkOutConfFromRazor?.amount?.length-2}}
₹</label>
</div>
</div>
<div class="ver-divider"></div>
<div class="hor-line"></div>
<div class="ver-divider"></div>
<div class="row">
<div class="col">
<label>Transaction date</label>
</div>
<div class="col text-right">
<label>{{checkOutConfFromRazor?.created_at | date}}</label>
</div>
</div>
<div class="text-center mt-4">
<button (click)="checkSubscriptionAndInvitee()" class="primary-button-big pl-5 pr-5 pt-1 pb-1"
data-dismiss="modal" style="border: none;">Close</button>
</div>
</div>
</div>
</div>
This is my .ts code
this.subscription = this.userService.verifyCheckOut(val.planId, JSON.stringify(response)).subscribe(value => {
if (value.isVerifyed) {
this.checkOutConfFromRazor = value.payment;
console.log("sucessData" + JSON.stringify(this.checkOutConfFromRazor));
setTimeout(() => {
this.myModalSuccess.nativeElement.click();
}, 20000);
} else {
this.checkOutConfFromRazor = value.payment;
this.myModalFailure.nativeElement.click();
}
});