Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular cdkDrag of Material table rows not working with router-outlet

See original GitHub issue

What is the expected behavior?

When using CDK Drag & Drop with Material table rows, if the table is loaded via router-outlet, it should be able to drag & drop the rows.

What is the current behavior?

Drag & drop will fail with the following error:

TypeError: Cannot read property '_getSiblingContainerFromPosition' of undefined at DragRef._updateActiveDropContainer (drag-ref.ts:727) at SafeSubscriber.DragRef._pointerMove [as _next] (drag-ref.ts:505) at SafeSubscriber.__tryOrUnsub (Subscriber.ts:265) at SafeSubscriber.next (Subscriber.ts:207) at Subscriber._next (Subscriber.ts:139) at Subscriber.next (Subscriber.ts:99) at Subject.next (Subject.ts:70) at HTMLDocument.handler (drag-drop-registry.ts:127) at ZoneDelegate.invokeTask (zone.js:423) at Zone.runTask (zone.js:195)

What are the steps to reproduce?

I create a stackblitz project (https://stackblitz.com/edit/angular-cdkdrag-table-row) that can reproduce the problem. Please open the debug console and you will see the following error message as soon as you try to drag a row

Take a look at app.component.html and see my comment in there.

Credit to https://stackblitz.com/edit/angular-igmugp, I followed and copied/pasted the mat-table and drag/drop code from it to create my project for the repro.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

It happens on Chrome (version 73.0.3683.86) in Ubuntu 18.04, It also happens on Windows 10 Edge For Angular/Material versions, you can find out from the stackblitz project.

Is there anything else we should know?

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:11 (3 by maintainers)

Top GitHub Comments

19reactions

lukaszgodulacommented, Aug 19, 2019

Any solution? I have the same issue when try drag and drop between datatables.

ngAfterViewChecked() { this.cdRef.detectChanges(); }

For me only such thing worked… Ugly and not optimal but I needed this to work with any price.

1reaction

henrikdahl8240commented, Aug 19, 2019

Can’t this problem be corrected, please? I suppose it’s quite obvious, that in all non-trivial Angular apps, there will be used router-outlet(s) and drag-drop presumably just doesn’t work at all as soon as you introduce a router-outlet.

Top Results From Across the Web

cdkDragHandle in angular material mat-table has no effect

It seems that cdkDragHandle doesn't work for mat-table . Tested with latest Angular Material version, v. 9.1.0.

angular/material - Gitter

Hi, looks like i have problem with stylig popups - here is how initiate style: .clubhub-user-panel { @include angular-material-theme($my-theme); @include ...

#Angular Material CDK — Drag and Drop between Lists [Mid ...

Learn how to build custom form controls like select dropdown with multiselection in my new advanced Angular Forms course ...

Angular 9|8|7 Material Table Column Width, Text Alignment ...

Angular Material provides an awesome fully-featured data-table component ... Sortable columns, Filter data, Frozen Columns, and Rows, etc.

[Solved]-Mat Table Not Sorting After View Change-angular.js

The problem you have is the *ngIf in the mat-table selector. If you check this.sort you'll see it's undefined. This works :