fix(drag-drop): not picking up handle that isn't a direct descendant

[crisbeto]

Fixes not being able to have a drag handle that isn't a direct descendant of CdkDrag.

Fixes #13335.

[jelbourn]

LGTM

[jelbourn]

Just needs rebase

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[crisbeto]

This one's good to go now.

[dakotamaker]

Hello @crisbeto I have an issue (stackblitz preview) that could be solved by the merging of this PR, just was curious if you all had an estimate of when this would go in since I see it's been good to go for 5 days. Thanks!

[wendelstam]

Do the same thing apply to to CdkDrag in relation to CdkDropList i.e. can a CdkDropList parent have projected content containing CdrDrag (and CdkDragHandle)?

[crisbeto]

Each CdkDrag instance looks up the DI tree until it finds a CdkDropList.

[wendelstam]

Great but just to clarify, so there are no problem using a ngFor in a CdkDropList that loads the content through an ngTemplate ref (that containt the CdkDrag and CdkDragHandle?

[crisbeto]

Having it in an ngFor definitely works, but I'm not too sure about your ngTemplate example. AFAIK the template's position in the DOM determines whether it'll be able to pick up the drop container.

[wendelstam]

FYI:
I tested it and it does not work when having the CdkDrag inside content projected through an ng-template.

This show the non-working scenario.
https://stackblitz.com/edit/angular-zttfez?embed=1&file=app/cdk-drag-drop-custom-preview-example.html

[crisbeto]

It doesn't work because the ng-template has no way of knowing about the cdkDropList. You can get it to work by moving it into the drop list:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
	<ng-container *ngTemplateOutlet="content"></ng-container>

	<ng-template #content>
		<div class="example-box" *ngFor="let movie of movies" cdkDrag>
			{{movie.title}}
		</div>
	</ng-template>
</div>

[shyamal890]

This is not working: https://stackblitz.com/edit/material-handle-issue

[crisbeto]

@shyamal890 that's not the case that is described here. There's no way for us to manage the one you posted, because one component can't "reach into" the template of another component in order to get a reference to the handle.

[xaqbr]

@shyamal890 that's not the case that is described here. There's no way for us to manage the one you posted, because one component can't "reach into" the template of another component in order to get a reference to the handle.

So much for splitting up components then.

[crisbeto]

#14437 will add a bit more flexibility.

[willbeaufoy]

@shyamal890 that's not the case that is described here. There's no way for us to manage the one you posted, because one component can't "reach into" the template of another component in order to get a reference to the handle.

@crisbeto Does this mean we cannot currently have the cdkDropList in a parent component and the cdkDrag/cdkDragHandle in a child component? When I try this it doesn't work. If this isn't possible, will #14437 allow us to do this?

[ghost]

It helped me, hope it helps you guys.
===== BEFORE =====

<container>
    <files-container>
        <ng-container *ngFor="let file of files>
            <files-container-item *ngIf="allowReorder" cdkDrag>
            </files-container-item>
        </ng-container>
</files-container>
<container>

My drag handle was inside files-container-item component, which did NOT work.
<div class="uploaded-file__drag-handle" cdkDragHandle></div>
===== AFTER =====

<container>
    <files-container>
        <ng-container *ngFor="let file of files>
            <files-container-item *ngIf="allowReorder" cdkDrag>
                <div slot="drag-handle" class="uploaded-file__drag-handle" cdkDragHandle></div>
            </files-container-item>
        </ng-container>
</files-container>
<container>

Now INSIDE child files-container-item component where the old drag handle used to be I put:

<ng-container *ngIf="allowReorder">
    <ng-content select="[slot=drag-handle]">
    </ng-content>
</ng-container>

What we did to make it work was to move dragHandle out of child component into parent with SLOT parameter, and in child component have ng-content with select a SLOT.

[Allisone]

What's the current status on that ?

@shyamal890 that's not the case that is described here. There's no way for us to manage the one you posted, because one component can't "reach into" the template of another component in order to get a reference to the handle.

@crisbeto Does this mean we cannot currently have the cdkDropList in a parent component and the cdkDrag/cdkDragHandle in a child component? When I try this it doesn't work. If this isn't possible, will #14437 allow us to do this?

What's the status ? I need this too. In my dashboard component I have a list of widget configurations, each widget configuration is passed to a widget component, that component has a header, that header should be my handle. The cdkDropList is of course in the dashboard component attached to a div.row. The cdkDragHandle is on my header inside of the widget component. I think this is a common use case, and it's very unfortunate that right now the cdkDragHandle is ignored and no way around.

[angular-automatic-lock-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.}