HTML5 Drag and Drop с Angular 5 - Проблемы с настройкой объекта dataTransfer

Question

По сути, я пытаюсь перетащить строку из Kendo UI grid от одного углового компонента к другому div, который живет внутри отдельного углового компонента.

Этот ряд должен быть добавлен в мой div, однако у меня возникают проблемы с установкой dataTransfer объект, чтобы я мог читать в моей цели падения.

rows.forEach(item => {
 this.renderer.setAttribute(item, 'draggable', 'true');
 const dragStart$ = fromEvent(item, 'dragstart');
 const dragOver$ = fromEvent(item, 'dragover');
 const drop$ = fromEvent(item, 'drop');
 let that = this;
 sub.add(dragStart$.pipe(
  tap(({ dataTransfer }) => {
   try {
    
    let services = that.serviceList;
    const dataItem = services[draggedItemIndex]; // HOW TO SET draggedItemIndex ???   
    let data = JSON.stringify(dataItem);

    dataTransfer.setData('application/json', data);
    dataTransfer.setData("text/plain", "Drop on site-config node..");
   } catch (err) {
    // IE doesn't support MIME types in setData
   }
  })
 ).subscribe(({ target }) => {
  // rowIndex IS ONLY AVAILABLE HERE, SO I NEED TO UPDATE dataTransfer object
  draggedItemIndex = target.rowIndex;
  
 }));

и в моем целевом компоненте:

  onDrop(ev) {
    ev.preventDefault();    
    ev.dataTransfer.dropEffect = "move";
    ev.dataTransfer.getData('application/json')
    ev.dataTransfer.getData('text')
  }