Issue
I'm new to angular I have parents as chapters and children as lectures, once the user clicked on a chapter, toggle will show this chapter's lectures and hide the other chapters' lectures. I've named lectures class with the chapterId e.g. list-lectures203 where 203 is the id of these lectures' chapter and so on I've to do this for Dragula service as createGroup,so far it works for the first showing now if I clicked back on any chapter it will says that the class name already exist
Group named: "lectures-list203" already exists.
I think this because the Html already rendered before and still there so how can I solve this issue?
this.dragulaService.createGroup(`lectures-list${this.chapter.id}`, {
moves: function (el, container, handle) {
return !handle.classList.contains('edit-mode');
}
});
<ul [ngClass]="canDrag?'':'edit-mode'" class="list-group" [(dragulaModel)]="courseLecturesForm.value.lectures" dragula="lectures-list{{this.chapter.id}}" id="lectures-list{{this.chapter.id}}">
<li [ngClass]="canDrag?'':'edit-mode'" class="list-group-item draggable array-card-header" formArrayName="lectures"
*ngFor="let lecture of courseLecturesForm.get('lectures')['controls']; let i = index;">
</li>
</ul>
toggle(item, i) {
item.shown = !item.shown;
this.current = i;
}
Solution
you need to destory drag service in ngOnDestroy
ngOnDestroy(): void {
this.dragulaService.destroy(`lectures-list${this.chapter.sort_order}`);
}
Answered By - Ash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.