Angular using directive for common logic

Question

I have multiple components, that share common logic. I want to move that logic to a single file, so I don't have to copy the code into each component. I though about using a directive. Would this be the right approach?

The logic is for building a drag and drop style diagram. (Handles the positioning etc...) So I would need to listen to (onmousedown) and (onmouseup) events as well and then call the appropriate handlers, which would be located in the directive as well.

So the template of the component would look like this:

<div class="entity-wrapper" (mousedown)="onMouseDown($event)" (mouseup)="onMouseUp($event)">
    <span>{{entityData.name}}</span>
</div>

Where onMouseDown() and onMouseUp() would be the methods found in the directive.

The directive would look something like this:

@Directive({
  selector: '[appDiagramElement]'
})
export class DiagramElementDirective {

  @Input() position: Vector2;

  constructor(private _elRef: ElementRef) { }

  onMouseDown($e: MouseEvent){
    ...
  }

  onMouseUp($e: MouseEvent){
    ...
  }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove($e: MouseEvent){
    ...
  }
}

When I try to do it this way. It doesn't work because the component has no methods onMouseDown() and onMouseUp(). So I thought, that I might want to create these methods in the component itself and then call the correct implementation in the directive's methods.

How would I go about that or is there a better way?

Edit: Added Template code, where I instantiate the component:

<div #wrapper class="diagram-wrapper">
  <app-entity [entityData]="testEntity" class="diagram-element" appDiagramElement [position]="testEntity"></app-entity>
</div>

Answer 1

Yes, the directive is the right approach. You'll need to add the event listener dynamically within your directive. For example, in your directive constructor:

constructor(elementRef: ElementRef, renderer: Renderer2) {
    // Listen to mousedown events in the component
    renderer.listen(elementRef.nativeElement, 'mousedown', (event) => {
      // Do something with 'event'
    })
);