drag & drop angular

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

@Component({
  selector: 'app-drag-and-drop',
  template: `
    <div cdkDropListGroup class="group">
      <div>
        <ul
          *ngFor="let group of groups; let i = index"
          cdkDropList
          (cdkDropListDropped)="drop($event)"
          [cdkDropListData]="addedItemsArr[i]"
          class="drag-area"
        >
          <li *ngFor="let item of addedItemsArr[i]" cdkDrag>
            {{ item }}
          </li>
        </ul>
      </div>

      <ul class="categories" cdkDropList [cdkDropListData]="items">
        <li *ngFor="let item of items" cdkDrag class="cdk-drag">{{ item }}</li>
      </ul>
    </div>
  `,
  styleUrls: ['./drag-and-drop.component.scss'],
})
export class DragAndDropComponent {
  items = [1, 2, 3, 4, 5];

  addedItemsArr = [['1', '2'], ['2'], []];
  groups = ['a', 'b', 'c'];

  drop(event: CdkDragDrop<any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
    console.log(this.addedItemsArr);
  }
}