Angular connect dynamically created Drop lists

Question

I need to implement drag drop for tasks which are inside the column so I can transfer them between other columns. I have a component which has a list of columns (board-page.component) and also column component which has a list of tasks(column.component.html), I already implemented drag-drop for columns and for tasks to reorder them inside the column but I can't understand how can I transfer tasks between columns? How can I connect columns with each other to transfer tasks between them? I tried to add cdkDropListGroup but it didn't work, maybe because I have two separate components.

board-page.component.html

<section *ngIf="(board$ | async) as board" class="board">
  <app-board-page-header
    class="board__header"
    [boardId]="board._id"
    (back)="navigateBack()"
    [boardTitle]="board.title || ''">
  </app-board-page-header>

  <div *ngIf="userId$ | async as userId"
       class="board__content">
    <ng-container *ngIf="(columns$ | async) as columns">
      <ul *ngIf="columns.length; else noColumns" class="board__columns columns"
       cdkDropList
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="reorderColumns($event, columns)"
       cdkDropListGroup>
        <li *ngFor="let column of columns | sortByOrder" class="columns__item" cdkDrag [cdkDragData]="column" cdkDropList>
          <app-column [boardId]="board._id" [column]="column" [userId]="userId"></app-column>
        </li>
      </ul>

      <ng-template #noColumns>
        <div class="no-data">
          <h1 class="no-data__title">No columns! Create one.</h1>
          <app-no-data-svg class="no-data__image"></app-no-data-svg>
        </div>
      </ng-tempolulate>
    </ng-container>
  </div>
</section>

column.component.html

<div class="column">
  <header class="column__header"
          [ngClass]="isEditingTitle ? 'column__header--editing' : ''">
    <ng-container *ngIf="isEditingTitle; else notEditing">
      <form (ngSubmit)="submitEditTitle(editTitleInput.value)"
            class="edit-column-form">
        <mat-form-field appearance="standard" class="edit-column-form__field">
          <input #editTitleInput
                 [value]="column.title"
                 class="edit-column-form__input" matInput>
          <button
            class="edit-column-form__submit-btn"
            mat-icon-button
            matSuffix
            matTooltip="Submit"
            type="submit">
            <mat-icon>check</mat-icon>
          </button>
          <button
            (click)="cancelEditTitle()"
            type="button"
            class="edit-column-form__cancel-btn"
            mat-icon-button
            matSuffix
            matTooltip="Cancel">
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>
      </form>
    </ng-container>

    <ng-template #notEditing>
      <button (click)="editColumn()" mat-button>
        <h3 class="column__title">
          {{ column.title }}
        </h3>
      </button>

      <button class="column__delete-btn" mat-button>
        <mat-icon (click)="showDeleteColumnModal()" class="delete-task">delete</mat-icon>
      </button>
    </ng-template>
  </header>
  <ul #tasksContainer *ngIf="(tasks$ | async) as tasks" class="column__tasks tasks"
  cdkDropList
  (cdkDropListDropped)="reorderTasks($event,tasks)"
  [cdkDropListData]="tasks"
   >
    <li *ngFor="let task of tasks | sortByOrder" class="tasks__item task" cdkDrag>
      <app-task [boardId]="boardId" [columnId]="column._id" [task]="task">
      </app-task>
    </li>
  </ul>
  <button (click)="openCreateTaskModal()" class="column__create-task-btn" mat-button>
    <mat-icon>add</mat-icon>
    {{"board.create-task-btn" | translate}}
  </button>
</div>

P.S. sorry for the mistakes, I am new here so feel free to ask me clarifying questions