see my steps
-
npm install @angular/cdk
in app.module.ts -> import { DragDropModule } from '@angular/cdk/drag-drop'; and import: [DragDropModule]
next I want create drag and drops cards list. I created component for one card, and created parrent component when I will to get [{data}], produce card and pass current data for current card.
Parrent component 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);
}
}
Parrent component HTML
<div cdkDropList class="groups" (cdkDropListDropped)="drop($event)">
<div *ngFor="let group of groups">
<app-group cdkDrag [data]="group"></app-group>
</div>
</div>
But drag and drop on my card doesn't work, please help me)
i have warning (event cdkdroplistdropped is not emitted by any applicable directives nor by div element) for (cdkDropListDropped)="drop($event) in component HTML