Drag doesn't work properly when the drag handle is in a child component

[AbelRudy]

Hello. I can't use the drag handle when it's implemented inside a child component and not directly inside the ktd-grid-item component My structure is like this :

<ktd-grid-item>
  <my-component>
    // bla bla bla
  </my-component>
</ktd-grid-item>

And my component is like that (basically) :

<div>
  <mat-icon ktdGridDragHandle>drag_indicator</mat-icon>
  <ng-content></ng-content>
</div>

This way, the drag handle doesn't work. But if I do something like this :

<ktd-grid-item>
  <mat-icon ktdGridDragHandle>drag_indicator</mat-icon>
  <my-component>
    // bla bla bla
  </my-component>
</ktd-grid-item>

It works.

[llorenspujol]

Hi @AbelRudy!

This is how Angular works; we can't do anything about it.

Having said that, there are workarounds. Recently, this issue was resolved: GitHub Issue. That essentially provides a workaround to solve your use case.

Another option if you want to control/project your drag handler inside your component would be as follows:

<ktd-grid-item>
  <my-component>
    <!-- Project it here -->
    <mat-icon ktdGridDragHandle>drag_indicator</mat-icon>
  </my-component>
</ktd-grid-item>

Let me know if you have any further questions!

[Erbenos]

@llorenspujol

You can switch from using ContentChild/ContentChildren to query for instances of ktdGridDragHandle to opposite approach of injecting the parent instance of ktd-grid-item into the ktdGridDragHandle through DI and registering it for given ktd-grid-item that way if thats what you mean by "This is how Angular works". Reasoning for ContentChildren behavior is nicely explained here https://github.com/angular/angular/issues/20810#issuecomment-401341413

Thanks for the library by the way, even with this issue, it has saved me a lot of time.