Angular CDK Drag and Drop added dynamically as a string not working

getAppointmentTemplate() {
const checker = true;
return `<div class='appointment' cdkDrag style='padding: 0.5rem;margin: 0.2rem;background-color: #000;border-radius: 5px;color: #fff;'>✅booked</div>`;
}


I am calling this function to append to a div inside my html. But the atribute cdkDrag is not working or not getting applied.

Screenshot of calendar component

So I want to create a system where user inputs a date and an appointment gets booked. This Part is done and working fine. Secondly I want to make it dragable so that the user can drag it to the next date or so. Everything is done the only problem is this. I am unable to apply cdkDrag

days += `<div cdkDropList (cdkDropListDropped)="drop($event)" class="dateEl ${checkToday}">${i} ${this.getDateFromUser[j] === `${i}/${this.month + 1}/${this.year}` ? this.getAppointmentTemplate() : ''}</div>`;


in the same manner cdkDropList is not working either any suggestion would be appreciated. Thanks in advance.

Continue reading...