Как правильно настроить cdk drag-drop для Angular?

посмотри мои шаги

1. # P2 #

2. в app.module.ts - ›импорт {DragDropModule} из '@ angular / cdk / drag-drop'; и импортировать: [DragDropModule]

3. Затем я хочу создать список перетаскиваемых карточек. Я создал компонент для одной карты и создал компонент parrent, когда я хочу получить [{data}], создать карту и передать текущие данные для текущей карты.

Паррентный компонент TS:

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';


@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

  groups = [something data]

  constructor() { }

  ngOnInit(): void {
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.groups, event.previousIndex, event.currentIndex);
  }
}

Частичный компонент HTML

<div cdkDropList class="groups" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let group of groups">
        <app-group cdkDrag [data]="group"></app-group>
    </div>

</div>

Но перетаскивание на моей карте не работает, пожалуйста, помогите мне)

у меня есть предупреждение (событие cdkdroplistdropped не генерируется никакими применимыми директивами или элементом div) для (cdkDropListDropped) = drop ($ event) в HTML-компоненте