Angular перетаскивание материала между списком и пользовательским компонентом

Question

Я использую angular материал, и я хотел создать всплывающее окно, где я мог бы перетаскивать элементы из таблицы (с поиском и нумерацией страниц) в список. Это то, что у меня сейчас есть:

Строки из таблицы можно перетаскивать, однако это не вызывает метод drop в моем списке.

Код:

<div class="grid-container">
<app-task-definition-list [enableDrag]="true" class="task-def-search"></app-task-definition-list>
<div cdkDropList (cdkDropListDropped)="drop($event)" class="temp-list">
    <mat-list>
        <div mat-subheader>Active tasks</div>
        <mat-list-item *ngFor="let taskDefinition of data.taskDefinitions">
            <mat-icon mat-list-icon>assignment</mat-icon>
            <div mat-line>{{taskDefinition.taskDefinitionKey}}</div>
        </mat-list-item>
      </mat-list>
</div>

В моем классе компонентов я определил метод drop для просмотра того, что передается как событие, однако он не срабатывает при добавлении элемента в список

drop(event: any) {
   console.log(event);
}

Что я делаю неправильно? Как я могу вызвать метод удаления / передать объект из таблицы в список в этом сценарии (где app-task-definition-list определяется как отдельный компонент)?