typescript - Angular + Ionic dra och släpp till olika lista dynamiskt

Detta är den överordnade komponenten.

<ion-content id="main-content">
  <ion-slides>
    <!-- Lists -->
    <!-- replace list with slide -->
    <ion-slide *ngFor="let list of board.lists">
      <ion-grid>
        <ion-row>
          <ion-col>
            <app-list
              [list]="list"
            ></app-list>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-slide>
  </ion-slides>
</ion-content>

Här är barnkomponenten (dvs. app-list)

<ion-card >
  <ion-card-header>
    <app-edit-list-name [listName]="list.name"> </app-edit-list-name>
  </ion-card-header>
  <ion-card-content>
    <div
    >
      <!-- Cards of a list -->
      <app-list-card
        *ngFor="let cardId of list.idCards"
        [cardId]="cardId"
        cdkDrag
      >
      </app-list-card>
    </div>
   
  </ion-card-content>
</ion-card>

app-list-card är barnbarnet.

Frågan är dock, hur drar och släpper jag barnbarn (dvs. app-list-card) i barn och förälder? Jag försöker med cdk drag and drop men det verkar inte fungera