Можно ли инкапсулировать шаблон в компоненте Angular без создания элемента dom?

Question

Я пытаюсь использовать директиву cdkDrag из углового материала внутри пользовательского компонента, но она не работает. Я полагаю, что это потому, что элемент cdkDrag больше не является прямым потомком элемента cdkDropList, так как angular создает новый элемент в DOM для моего компонента. Я пытался использовать cdkDragRootElement, но он тоже не работал. Поэтому я подумал, есть ли способ, который не создает новый элемент dom.

Следуя примеру в угловом материале (https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists), он работает, но когда я оборачиваю div cdkDrag в компонент, он теряет свое поведение.

Рабочий пример:

<div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>

Не работает, внутри моего пользовательского компонента:

<div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <app-drag *ngFor="let item of todo" [item]='item'></app-drag>
</div>

шаблон приложения-перетаскивания:

<div class="example-box" cdkDrag>{{item}}</div>

Он рендерится как заслуженный, но когда я пытаюсь перетащить элементы, он теряет связь с элементом cdkDropList. Я также не получаю никаких ошибок в консоли.