Modal rendering before object loads - html

Question

The this.obj data is populated after modal window load. So, how can I sync both data and modal?
Acomponent.ts
this.dialog.showModal(this.referenceNumber);
dialogComponent.ts
export class DialogComponent {
obj:any;
showModal(name:String) {
if(name!==null) {
this.obj=name;
$("#myModal").modal('show');
}
}
hideModal():void {
document.getElementById('close-modal').click();
}
errorModal() {
$("#errorModal").modal('show');
}
}
dialog.html
<div id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

The Angular approach is to control visibility of the modal via the javascript.
So something like:
<div *ngIf="showModal" id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="showModal=false">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Note the *ngIf="showModal" and (click) event handler on the button.
Your .ts file would need a showModal: boolean; property, and the button click handler would need run change detection if you are using push change detection.
Edit:
And yes, don't use jQuery in Angular. I recommend the ng-bootstrap library.