How to bind event listener for rendered elements in Angular 2

Question

How can I bind an event listener in rendered elements in Angular 2   I am using Dragula drag and drop library  It creates dynamic HTML but my event is not bound to dynamic HTML elements

User · Answer

In order to add an EventListener to an element in angular 2+, we can use the method listen of the Renderer2 service (Renderer is deprecated, so use Renderer2):

listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any) => boolean | void): () => void

Example:

export class ListenDemo implements AfterViewInit { 
   @ViewChild('testElement') 
   private testElement: ElementRef;
   globalInstance: any;       

   constructor(private renderer: Renderer2) {
   }

   ngAfterViewInit() {
       this.globalInstance = this.renderer.listen(this.testElement.nativeElement, 'click', () => {
           this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green');
       });
    }
}

Note:

When you use this method to add an event listener to an element in the dom, you should remove this event listener when the component is destroyed

You can do that this way:

ngOnDestroy() {
  this.globalInstance();
}

The way of use of ElementRef in this method should not expose your angular application to a security risk. for more on this referrer to ElementRef security risk angular 2

User · Answer

import   AfterViewInit  Component  ElementRef  from   angular core    constructor private elementRef ElementRef      ngAfterViewInit       this elementRef nativeElement querySelector  my-element                                    addEventListener  click   this onClick bind this       onClick event      console log event

User · Answer

HostListener  window click      event    onClick event       check this below link to detect CapsLock on click  keyup and keydown on current window  No need to add any event in html doc  Detect and warn users about caps lock is on

User · Answer

If you want to bind an event like  click  for all the elements having same class in the rendered DOM element then you can set up an event listener by using following parts of the code in components ts file   import   Component  OnInit  Renderer  ElementRef  from   angular core    constructor  elementRef  ElementRef  renderer  Renderer        dragulaService drop subscribe  value    gt          this onDrop value slice 1               public onDrop args       let  e  el    args     this toggleClassComTitle e  checked         public toggleClassComTitle el  any  name  string         el querySelectorAll   com-item-title-anchor   forEach  function   item            item addEventListener  click   function event                  console log  item-clicked

User · Answer

HostListener should be the proper way to bind event into your component      Component     selector   your-element      export class YourElement      HostListener  click      event    onClick event         console log  component is clicked         console log event

[angular] How to bind event listener for rendered elements in Angular 2?

Examples related to angular

Examples related to addeventlistener

Examples related to event-binding