Angular Material drag and drop doesn't work

I have a html file like this :

<div [ngClass]="!isCollapse ? 'scroll' : 'big-scroll'" cdkDropListGroup class = "list-of-phase">
    <div *ngFor="let phaseDto of listOfPhasesWithTasks; index as i" cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="listOfPhasesWithTasks">
        <div class="panel-group" >
            <div class="panel panel-default">
                <div class="panel-heading phase-card-header" style="display: contents">
                    <div  data-toggle="collapse" [attr.href]="'#phase' + i" style="cursor: pointer" aria-expanded="true" [attr.aria-controls]="'phase' + i" >
                        <app-phase-card-header (here some inputs and outputs)>
                        </app-phase-card-header>
                    </div>
                </div>
                <div [attr.id] = "'phase' + i" class="panel panel-collapse collapse" [ngClass]="phaseDto.data.expanded ? 'in' : ''">
                    <div class="panel-body">
                        <div *ngIf="phaseDto.tasks !== null && phaseDto.tasks.length>0; else showEmpty">
                            <div *ngFor="let task of phaseDto.tasks"  class="even">
                                <div style="background-color: inherit " cdkDrag cdkDragBoundary=".list-of-phase" cdkDragLockAxis="y" [cdkDragData]="task">
                                    <app-task-row [task]="task"
                                                  [projectToEdit]="projectToEdit" style="background-color: inherit"
                                                  [phase]="phaseDto.data">
                                    </app-task-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

But my drop method never gets called. I need it in here, because I want to move tasks between phases, so it has to be on the div *ngFor let phaseDto of listOfPhase.. The only part of code I'm able to call this drop method is the div :

<div [attr.id] = "'phase' + i" class="panel panel-collapse collapse" [ngClass]="phaseDto.data.expanded ? 'in' : ''">

but then the container is the same so it has no use for me. What am I doing wrong and how can I resolve this problem?