Add click event on Component

Question

I made a custom button component and I am trying to make a directive that can be applied on the button in order to dynamically add some behavior when the user clicks it :

@Directive({
  selector: '[appMyDirective]'
})
export class AppMyDirective {

  // Here, I inject the button instance
  constructor(private button: MyButtonComponent) {
    this.button...what()?
  }

}

I could add some code on MyButtonComponent where I handle an array of callbacks but I would prefer to avoid that. How can I dynamically handle the click event on MyButtonComponent without modifying its code?

Do you just need a way to react on click actions within your directive? — Nickolaus, Sep 10 '18 at 16:34
should be... I hope the syntax is correct but basically this is how you can listen to any event within a directive or an component — Nickolaus, Sep 10 '18 at 16:43

Nickolaus · Accepted Answer · 2018-09-10T16:46:15.683

This is pretty simple, just create a function inside your directive:

 @HostListener('click', ['$event']) click(event) {
  event.preventDefault();
  ... your code
 }

see also: https://stackoverflow.com/a/34734906/1173391

also usefull:

offical doc: https://angular.io/api/core/HostListener
short explanation of HosBinding and HostListener: https://medium.com/@debug_mode/what-are-hostbinding-and-hostlistener-in-angular-985ccf0d4454

Why use HostListener and not addEventListener on the element? Angular is smart enough to unsubscribe from the event by itself as the component/directive gets destroyed. If you use addEventListener you will to remove the binding manually otherwise the binding may persist over time.

score 0 · Answer 2 · answered Sep 10 '18 at 16:40

0

use ViewContainerRef like this :

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective{

  constructor(
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    const ele = this.viewContainerRef.element.nativeElement as Element;

    ele.addEventListener('click',e =>{ 
        console.log(e)
    });
  }

}

answered Sep 10 '18 at 16:40

SoroushNeshat

656
5
11

Works like a charm. I wondering is there is a more "angular-friendly" solution that does not involve getting the native element. – Arnaud Denoyelle Sep 10 '18 at 16:45
as @Nickolaus said its much better to use **@HostListener** . i didnt work with angular for a long time and forgot that solution . – SoroushNeshat Sep 10 '18 at 16:47
1

avoid this, to avoid possible memory leaks – Nickolaus Sep 10 '18 at 16:51
@Nickolaus may i ask why ? i think event listener doesnt destory when directive destories , right ? – SoroushNeshat Sep 10 '18 at 16:53
1

yes... the eventlistener may (must not) still be existing and it can be that the memory which it preserves is not cleared until you leave the page/close the tab... – Nickolaus Sep 10 '18 at 16:55

Add click event on Component

2 Answers2