Background still remains after Bootstrap 4 modal disappears - html

Question

I am using bootstrap 4 modal, when I click on "Ok" button I call function and after that the modal disappear, but the back-ground still remains. whereas for the close button the modal and the back-ground dissapers its because I am using "data-dismiss="modal", but if I use this same for "Ok" button this is not working. I have used (data-backdrop="false"), but it completely removes the back-ground which i donot want. so can someone please tell me how to do that. I have uploaded the following code.
<div class="modal" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>{{question}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="onConfirm($event)">Ok</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.ts File
export class ModalComponent {
#Input() question: string = ''
#Input() title: string = ''
#Output() confirm = new EventEmitter<void>()
constructor() { }
onConfirm(event: Event) {
event.stopPropagation()
this.confirm.emit()
}
}