Sorry if this question has been asked before, but I couldn't find any information. I am trying to create a Bootstrap Modal popup with a form inside and I want it to be draggable. I have tried using a simple button to display an ng-template on click, but I am having trouble dragging the contents when using angular2-draggable. However, if I remove the ng-template and just use a normal div, dragging works fine.
<button type="button" class="btn btn-outline-primary" (click)="open(testDialog)">TestDrag</button>
<ng-template #testDialog let-modal>
<div ngDraggable>
<div
class="
modal-header
row
d-flex
justify-content-between
mx-1 mx-sm-3
mb-0
pb-0
border-0
"
>
<h3 class="modal-title">Asset</h3>
This is the header
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true"&g;;×</span>
</button>
</div>
<div class="modal-body">This is the body</div>
<div class="modal-footer">This is the footer</div>
</div>
</ng-template>
If I take out the ng-template and use a regular div, dragging works perfectly. Can someone please advise on how to make it work under ng-template?
EDIT: Below is the code for the open method located in irgraph.component.ts file
open(content: any) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', centered: true}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${IRGraphComponent.getDismissReason(reason)}`;
});
}