Drag & Drop area for a particular json element *ngFor

Question

Drag & Drop feature using angular material cdk and I want to achieve drop ara for each json element

html

    <div class="todo-container column-container">
      <div class="list"
           cdkDropList
           #todoList="cdkDropList"
           [cdkDropListData]="todos"
           [cdkDropListConnectedTo]="[doneList]"
           (cdkDropListDropped)="onDrop($event)">
        <h2>Tech to learn</h2>
        <mat-card *ngFor="let todo of todos" cdkDrag>
          <mat-card-header>
            <mat-card-subtitle>{{todo.category}}</mat-card-subtitle>
          </mat-card-header>
        </mat-card>
      </div>
    </div>

    <div class="done-container column-container">
      <div class="list"
           cdkDropList
           #doneList="cdkDropList"
           [cdkDropListData]="completed"
           [cdkDropListConnectedTo]="todoList"
           (cdkDropListDropped)="onDrop($event)">
        <h2>Tech learned</h2>
        <mat-card *ngFor="let complete of completed" cdkDrag>
          <mat-card-header>
            <mat-card-title>{{complete.name}}</mat-card-title>
          </mat-card-header>
        </mat-card>
      </div>
    </div>

  </div>

ts

todos = [
    {
      name: 'Angular',
      category: 'Web Development'
    },
    {
      name: 'Flexbox',
      category: 'Web Development'
    },
    {
      name: 'iOS',
      category: 'App Development'
    },
    {
      name: 'Java',
      category: 'Software development'
    }
  ];

  completed = [
    {
      name: 'Android',
      category: ''
    },
    {
      name: 'MongoDB',
      category: ''
    },
    {
      name: 'React',
      category: ''
    }
  ];

  onDrop(event: CdkDragDrop<string[]>) {
    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);
    }
  }

onfirstload:

after drag-drop :

dragging and dropping working fine but, I need to do it in a different way. I need dropping area toa particular key from "completed.name". If anything is drag from "todos" and dropping in the dropping area, it should add the category to that particular key. It means I need each label" name" should have a dropping area section to that particular name

for example, if I drag-drop app development beside "ios", that app development to be added to json for the name "ios"

And dropping area and labels should be side by side like below

after dropping output json of completed should be:

completed = [
        {
          name: 'Android',
          category: 'App Development'
        },
        {
          name: 'MongoDB',
          category: 'web development'
        },
        {
          name: 'React',
          category: 'software development'
        }
      ]