[Drag and Drop] cdkDragHandle ignored when it is placed inside a child component

[adraeth]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

cdkDragHandle is correctly bound to its cdkDrag and it is the only element which allows cdkDrag to be moved, even when cdkDragHandle is specified inside a child component

What is the current behavior?

When cdkDragHandle is not placed directly in the same component as cdkDrag, but in a child component, it won't be bound to its cdkDrag. The entire cdkDrag can be used to move the element, not only the cdkDragHandle.

What are the steps to reproduce?

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

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

Material 7.0.1

[crisbeto]

When the handle is inside the template of another component, there's no way for cdkDrag to find it since it uses ContentChildren.

[PaulMcManus23]

Does this mean that for complex applications of columns and cards (with complex logic at all levels)... the whole drag and drop page needs to be rolled into the one component?

[manueledones]

I need it too, my draggable items are complex children component, I need to put the cdkDragHandle inside the template of the draggable items...

[jimshepherd]

A work around for some limited cases is to project the element that holds the cdkDragHandle from the parent component to the child component and use ng-content to place it correctly within the child. Works for my simple case.

In the parent component template:

<mat-list cdkDropList (cdkDropListDropped)="dropped($event)">
  <mat-list-item ngFor="let item of items" cdkDrag [cdkDragData]="item">
    <child [item]="item">
      <button mat-flat-button color="grey">
        <mat-icon cdkDragHandle>unfold_more</mat-icon>
      </button>
    </child>
  </mat-list-item>
</mat-list>

Then in the child component template:

<div>Move me from here -></div><ng-content></ng-content>

[alexdevmotion]

I also need this, I have a list of dynamically rendered components that I want to drag around in the page. cdkDragHandle is exactly what I need, but I cannot use it the way it's implemented now.

[shyamal890]

This is a must have for any website

[willbeaufoy]

Yes we need this too, also having cdkDropList in a parent component and cdkDrag (and cdkDragHandle) in a child component.

[seandevenish]

I'll add my vote as well, structuring a complex app requires us to use child components without cdkDrag falling apart.

[david-genger]

Vote ++ I need it desperately! Also, the workaround does not work for me.

[dottodot]

Gets my vote, not ideal having to keep everything in parent component. Makes it unusable in a lots of cases.

[lucasklaassen]

Also would love this feature. We are rendering a complex table that contains a component per cell in the component. We only want the first row of columns to be able to drag the table to reorder it. Putting the directive on the child component for that row would be the best way to do this.

[robertoost]

When the handle is inside the template of another component, there's no way for cdkDrag to find it since it uses ContentChildren.

@crisbeto This can now be done in Angular with the descendants property in the second argument opts of ContentChildren.

@ContentChildren( DragHandleComponent, { descendants: true } ) dragHandles: QueryList<DragHandleComponent>;

Perhaps an optional CdkDragDeep or CdkDragDescendants directive could be implemented here?

[crisbeto]

This is what we're doing already: https://github.com/angular/material2/blob/master/src/cdk/drag-drop/directives/drag.ts#L85