Angular drag and drop for array of object

Question

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


@Component({
  selector: 'kt-manage-menu',
  templateUrl: './manage-menu.component.html',
  styleUrls: ['./manage-menu.component.scss']
})
export class ManageMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  movies = [
    {
      id:1, title:'Beauty and the best'
    },
    {
      id:2, title:'Spider Man'
    }
   ]

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

Example is here : https://stackblitz.com/angular/omybvaablxk?file=src%2Fapp%2Fcdk-drag-drop-custom-placeholder-example.ts

**How I can create Angular drag and drop for array of object please ? I try it by array of string only it works but by array of objects don't .. I try interface method but it isn't work also

**

Abhishek Kulkarni Abhishek Kulkarni · Accepted Answer · 2020-04-07T07:43:32

In your cdk-drag-drop-custom-placeholder-example.html, just change the following

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>

    {{movie.title}}       -------------->  Do this instead of movie, this will iterate over the object titles.

  </div>
</div>

Angular drag and drop for array of object

1 Answers