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
– Nickolaus, Commented Sep 10, 2018 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
– Nickolaus, Commented Sep 10, 2018 at 16:43

Nickolaus · Accepted Answer · 2018-09-10 16:46:15Z

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.

SoroushNeshat · Accepted Answer · 2018-09-10 16:40:04Z

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, 2018 at 16:40

SoroushNeshat

6745 silver badges11 bronze badges

5 Comments

Arnaud Denoyelle Over a year ago

Works like a charm. I wondering is there is a more "angular-friendly" solution that does not involve getting the native element.

SoroushNeshat Over a year ago

as @Nickolaus said its much better to use @HostListener . i didnt work with angular for a long time and forgot that solution .

Nickolaus Over a year ago

avoid this, to avoid possible memory leaks

SoroushNeshat Over a year ago

@Nickolaus may i ask why ? i think event listener doesnt destory when directive destories , right ?

Nickolaus Over a year ago

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

Collectives™ on Stack Overflow

Add click event on Component

2 Answers 2

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Linked

Related