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>

lovis91 · Accepted Answer · 2020-06-24T15:39:54.450

2

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'
    })
);

edited Jun 24 '20 at 15:39

answered Jun 24 '20 at 11:51

lovis91

1,988
2
14
24

1

I'm curious; do you need to remove the listener in `ngOnDestroy()`? – Silvermind Jun 24 '20 at 12:05
Thank you very much. I managed to get it working using this. I used Renderer2, you might want to update the answer, so its up to date. – Jan Krüger Jun 24 '20 at 12:30
1

@Silvermind Seems like it can be done this way: https://stackoverflow.com/a/44454508/12511130 Its the same for Renderer2 – Jan Krüger Jun 24 '20 at 12:32
@JanKrüger Thanks for your response. I suspected that one could do it, but I was unsure if you need to. In some cases angular cleans up injected services when a component gets destroyed and it could then automatically 'unlisten'. However, I think the answer could add that information too, to be complete. – Silvermind Jun 24 '20 at 14:15

Angular using directive for common logic

1 Answers1