Angular: drag and drop between multiple components and service

Question

I'm having trouble implementing cdkDragAndDrop in my project. I want to use drag and drop between multiple components. I tried [this][1] but it's not working. My 2 arrays (stored in the service):

coursesStudentOrderdBySemesters: Array<Array<Course>>;
coursesUnpickedOrderdByTrajectories: Array<Array<Course>>;

The problem is: for my student, I want a view with courses he takes, ordered by semester. On the other side of the screen, I want to have a view of every course he didn't pick ordered by trajectory. That workes but if I want to drag from the pool of courses to the student side, it takes the whole array of courses from that trajectory instead of the course.

I have a parent component with two child components(X1 and X2). Each child should have multiple lists (which are components as well)(X1L1, X1L2..., X2L1, X2L2...). Inside these lists are the courses. These courses should be draggable. So I want to be able to drag a course component from X1L1 to X2L2.

Here is the code I have so far:

The home component

    <div class="row" cdkDropListGroup>
     <div class="col-9">
      <app-edit-curriculum-overview [coursesStudentOrderdBySemester]="coursesStudentOrderdBySemester"></app-edit-curriculum-overview>
     </div>
     <div class="col-3">
      <app-pool-of-courses [coursesUnpickedOrderdByTrajectory]="coursesUnpickedOrderdByTrajectory" [trajectories]="trajectories"></app-pool-of-courses>
     </div>
    </div>

childcomponent1

    <div class="card">
     <h5 class="card-header small">Richting: Elektronica-ICT Hoofdtraject:</h5>
     <div class="card-body">
      <app-edit-curriculum-semester [coursesStudentOrderdBySemester]="coursesStudentOrderdBySemester" *ngFor="let coursesPerSemester of coursesStudentOrderdBySemester,let i = index" [courses] = coursesPerSemester [count]=i></app-edit-curriculum-semester>
     </div>
    </div>

** the listcomponent**

    <div class="row fixedHeight">
     <div class="col-1">
      <p class="vertical small">Semester {{ count + 1}}</p>
     </div>
     <div class="col-11 card-group" cdkDropList id="coursesStudentOrderdBySemester"[cdkDropListData]="coursesStudentOrderdBySemester" (cdkDropListDropped)="drop($event)">
      <app-course-template-student *ngFor="let course of courses" [item]="course" cdkDrag></app-course-template-student>
     </div>
    </div>

Child Component 2

    <div class="card">
     <h5 class="card-header small">Keuze vakken</h5>
     <div class="card-body"*ngFor="let courses of coursesUnpickedOrderdByTrajectory, let i = index" cdkDropList id="coursesUnpickedOrderdByTrajectory" cdkDropListConnectedTo="coursesStudentOrderdBySemester" [cdkDropListData]="coursesUnpickedOrderdByTrajectory" (cdkDropListDropped)="drop($event)">
      <div class="traject">
       <button  class="" data-toggle="collapse" [attr.data-target]="'#' + 'prefix' + i"   aria-expanded="true" aria-controls="collapseOne" style="color:black">{{ trajectories[i].Name}}   <i class="fas fa-chevron-down"></i></button>
       <div [attr.id]=" 'prefix' + i"  class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <app-course-template-in-pool *ngFor="let course of courses" [item]="course" cdkDrag></app-course-template-in-pool>
       </div>
      </div>
     </div>
    </div>

How to use Angular7 (angular material) drag drop between two components

Angular: drag and drop between multiple components and service

0 Answers0