cdkDropListDropped never fired in angular 10 and material table

Question

I was using cdkDropList to reorder columns in the material table.

Until the version 8 everything was going fine, but after updating to version 10 the cdkDropListDropped is never fired.

<table mat-table #table [dataSource]="dataSource" 
  cdkDropListGroup>
      <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
          <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
              cdkDropList
              cdkDropListLockAxis="x"
              cdkDropListOrientation="horizontal"
              (cdkDropListDropped)="dropListDropped($event, colIndex)"
              cdkDrag
              (cdkDragStarted)="dragStarted($event, colIndex)"
              [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
            {{disCol.field}}
          </th>
          <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
          </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        style="pointer-events: none;"
        >
      </tr>
    </table>

It seems like the cdkDropList and cdkDrag couldn't be included in the same tag.

Does anyone have an idea about what's going on?

Stackblitz with angular 8

Stackblitz with angular 10

score 2 · Accepted Answer · answered Jul 21 '20 at 15:04

Try this

<table mat-table #table [dataSource]="dataSource" cdkDropListOrientation="horizontal"
       cdkDropList  (cdkDropListDropped)="drop($event)">
  <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
    <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
        cdkDropList
        cdkDropListLockAxis="x"
        cdkDropListOrientation="horizontal"
        (cdkDropListDropped)="dropListDropped($event, colIndex)"
        cdkDrag
        (cdkDragStarted)="dragStarted($event, colIndex)"
        [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
      {{disCol.field}}
    </th>
    <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      style="pointer-events: none;"
  >
  </tr>
</table>

and in .ts

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

and in You .ts add this

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

Yeah, it worked. I also removed duplicated cdkDropList. Do you know why it doesn't work with dropListGroup? — Konrad Czerwinski, Jul 22 '20 at 07:57
From documentation "You can connect one or more cdkDropList instances together by setting the cdkDropListConnectedTo property or by wrapping the elements in an element with the cdkDropListGroup attribute." — , Jul 22 '20 at 10:01

cdkDropListDropped never fired in angular 10 and material table

1 Answers1