Components: cdk/drag-drop Cannot read property 'nativeElement' of undefined MatTable

[cp79shark]

Bug, feature request, or proposal:

I imagine this is an unsupported use case, but I'm trying to get the drag-drop functionality to work with the CDK/Material Table. I've tried a bunch of permutations and can't seem to get it to do even basic drag and drop.

I'd envision that I'd probably need to implement all the event hooks and manage the data source used by the table as I drag, but seeing as the placeholder created is locked to the mat-cell I didn't get that far in trying to make it work.

What is the expected behavior?

That I can drag and drop a cdkDrag element when that cdkDrag element happens to be a mat-row, for example. The cdkDragHandle directive be honored when in a mat-cell.

What is the current behavior?

The drag placeholder is created, but locked to the mat-cell for movement. Additionally, the cdkDragHandle does not seem to work in this situation. A drag of anywhere on the row initiates a drag operation. Though searching this might be fixed in #13335?

Uncaught TypeError: Cannot read property 'nativeElement' of undefined is thrown in drop.ts:369 when starting the drag.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-xout8v

What is the use-case or motivation for changing an existing behavior?

I imagine it's a fairly common use case to be able to drag and drop rows in a table.

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

Same as the stackblitz, 7.0.0 rc0 (rc1 for drag-drop). Only tested in Chrome 69.0.3497.100 on Win10.

Is there anything else we should know?

Not that I can think of, mainly looking for guidance if this is going to be a supported use case.

[jelbourn]

@crisbeto one thing I've seen is that cdkDrop has an error when attached to an ng-container. I'm not sure if there's anything we can do about that, but it would be good to have a drag/drop + table example.

[wbhob]

Any update on this? I'm trying to implement this in my app right now and running into some issues.

[kalyaniarunachalam]

Even I am looking for similar to this.. I would like to implement drag and drop of row along with grouping in mat table. Please let us know on update

[crisbeto]

I can confirm that this throws if a cdkDropList is added to an ng-container. We can't do much about it, but we can throw a proper error like we do for cdkDrag.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}