dragging is not working for ng-template

[ghost]

Hi I'm using NgbModal in Angular4 application. for that modal popup drag and drop, we are using angular2-draggable. it is working fine for simple "div" and it is not working as expected with ng-template

here is my sample code <ng-template #divBranching let-c="close" let-d="dismiss"> <div ngDraggable [handle]="divDraggable" class="card" style="resize: both; overflow:hidden"> <div #divDraggable class="card-header"> <h3>Draggable Content</h3> </div> </div> </ng-template> parent items is displaying in the same position. if i apply ngDraggable and [handle] to the ng-template we are unable to drag it. please help to fix this issue

[xieziyu]

@SivaPrakashK90 I'm afraid it's not an issue of this directive. In your code, #divDraggable is not the parent element. In fact, NgbModal will create a 'modal-content' to contain ng-template. So if you can find a way to get correct templateRef of the parent element, you can make it work.

[ghost]

can you provide me working example?

[FreeZaaa]

@SivaPrakashK90, here is what i do. // i have 2 modal-content in my modal, the first one is the container as xieziyu said. const aa = document.getElementsByClassName('modal-content'); // set the first modal-content white and transparent aa[0].setAttribute('style','background-color: rgba(255,255,255,0)'); // set the second one not transparent aa[1].setAttribute('style','opacity: 1');

but the border still seen, i'm working on it.

[FreeZaaa]

@SivaPrakashK90 const aa = document.getElementsByClassName('modal-content'); aa[0].setAttribute('style', 'background-color: rgba(255,255,255,0);border:rgba(255, 255, 255, 0)'); aa[1].setAttribute('style', 'opacity: 1');

[faizaldong]

my idea:

<ng-template #modaltemplate>
   <div ngDraggable class="modal-draggable"> //after ng-template you create a div so you can add ngDraggable attribute and class modal-draggable
     // bootstrap modal head body footer goes here
   </div>
 </ng-template>

In component.ts you add this to open bootstrap.

the object is to add class to the modal-dialog

this.modalRef = this.modalService.show(modaltemplate, {class: 'backgroundTransparent'});

In component.css you add this css codes.

below code, we will set background and border-radius to modal-draggable

.modal-content > .modal-draggable {
	background-color: #fff;
	border-radius: 6px;
}

before we added style to modal-content, the result is like this

after we added style to modal-content

.backgroundTransparent .modal-content {
	background: transparent;
	border: 0;
}

hope this help.

faizal,