Can't Drag Dynamically Appended DIV Angular2 Typescript

When I add a directive that permits to me to apply my drag and drop in the tag which I will add dynamically <p dnd [drop]=true></p> the dnd is not applicable on tag P

there are any solution to consider this tag P as a static tag?

I'm Using gridmanager jQuery

gm.addEditableAreaClick = function (container, btn) {
var cTagOpen = '<!--' + gm.options.gmEditRegion + '-->',
cTagClose = '<!--\/' + gm.options.gmEditRegion + '-->',
elem = null;
$(('.' + gm.options.gmToolClass + ':last'), container)
.before(elem = $('<div>').addClass(gm.options.gmEditRegion + ' ' + gm.options.contentDraggableClass)
.append(gm.options.controlContentElem + '<div class="' + gm.options.gmContentRegion + '"><p dnd **[drop]="true"**>New Content</p></div>'))
.before(cTagClose).prev().before(cTagOpen);
gm.initNewContentElem(elem);
}; <== this code is from gridmanager.js


the tag <p> is created dynamically in my page so in need to apply a drag on this div

<li dnd >value</li> <== this code is from component.html

Continue reading...