how to drag an item between nested components using Angular Material drag and drop

I have a structure like this:

<list-of-componnts cdkDropListGroup class = "list-of-components>
    <div *ngFor = let component of components cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="component.tasks">
        <divs styling panel-group>
              <component-header>
              <component-body>

Then in my component-body I have:

<div *ngFor let task of tasks>
      <app-task>
      </app-task>
</div

and inside app-task:

<div cdkDrag cdkDrag cdkDragBoundary=".list-of-components" cdkDragLockAxis="y"
    <some dives presenting data for example task.name>

My problem is this: When Im trying to drag ma task, the dropList seems to not react. I’ve put ini the drop method:

        if (event.previousContainer === event.container) {
console.log("nothing changed")
        } else {
            console.log("you moved between conteners")
        }
    }}

and neither one of this console.logs is called, can someone help me with this prbolem? I’m trying to achieve something like in this example from the docs: https://stackblitz.com/angular/gkojerbjmla?file=src%2Fapp%2Fcdk-drag-drop-disabled-sorting-example.html

Source: New feed
Source Url how to drag an item between nested components using Angular Material drag and drop