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-24 15:39:54Z

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, 2020 at 15:39

answered Jun 24, 2020 at 11:51

lovis91

2,1692 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Silvermind Over a year ago

I'm curious; do you need to remove the listener in ngOnDestroy()?

Jan Krüger Over a year ago

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 Over a year ago

@Silvermind Seems like it can be done this way: stackoverflow.com/a/44454508/12511130 Its the same for Renderer2

Silvermind Over a year ago

@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.

Collectives™ on Stack Overflow

Angular using directive for common logic

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related