angular delete component from history on toggle-CodePudding

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'"  [(dragulaModel)]="courseLecturesForm.value.lectures"  dragula="lectures-list{{this.chapter.id}}" id="lectures-list{{this.chapter.id}}">

  <li [ngClass]="canDrag?'':'edit-mode'"  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;
 }

CodePudding user response：

you need to destory drag service in ngOnDestroy

 ngOnDestroy(): void {
  this.dragulaService.destroy(`lectures-list${this.chapter.sort_order}`);
}

CodePudding user response：

Maybe You will find answer below

//ts file

selectedMenu='';
toggle(id){
this.selectedMenu=id;
}

<!-- html file -->
  <ul >

    <li *ngFor="let lecture of  courseLecturesForm.get('lectures')['controls']; let i = index;" (click)="toggle(chapterid)"  >

      <child-component [ngClass]="{selected:selectedMenu==chapterid}"></child-component>

        <!--or -->

        <ul [ngClass]="{selected:selectedMenu==chapterid}"></ul>

    </li>

  </ul>

According to my knowledge this is what you are looking for. Let me know any changes you need.