I have a Dashboard Component with this template:

<div class="widget-container" id="dashboard-container">
    <app-my-widget id="comp1" draggable boundary="#dashboard-container">
        <p component>Test 1</p>
    </app-my-widget>
</div> 

As you can see we have a component app-my-widget that have a directive draggable

This is the app-my-widget html:

<div class="widget-container">
    <div class="drag-handle" dragging-handler></div>
    <div class="content">
        <ng-content select="[component]"></ng-content>
    </div>
    <div class="resize-handle" resize-handler></div>
</div>

This is my app-widget-component referencing the Two Directives:

@Component({
  selector: 'app-my-widget',
  standalone: true,
  imports: [],
  hostDirectives: [
    {
      directive: DraggableDirective,
      inputs: ['boundary'],
    },
    {
      directive: DraggingHandlerDirective
    },
  ],
  templateUrl: './my-widget.component.html',
  styleUrl: './my-widget.component.scss'
})

My problem is the following I have a second directive dragging-handler with just this code:

constructor(public elementRef: ElementRef<HTMLElement>) {}

I need from the draggable Directive reference the div element with the Directive dragging-handler so my code should be something like this:

@ContentChild(DraggingHandlerDirective) handle!: DraggingHandlerDirective;
  handleElement!: HTMLElement;

But handle is always undefined. What I’m missing here?