Angular + Ionic drag and drop to different list dynamically

This is the parent component.

<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>

Here is the child component (aka. 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 is the child of the child.

The question is though, how do I drag and drop grandchildren (aka. app-list-card) in child and parent? I am trying cdk drag and drop but it does not seem to work