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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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) => {
      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");

       });
    });

}

Answer 5

@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

Answer 6

import { Component, OnInit } from '@angular/core';

create variable inside the component:

onlineStatus: any; 

inside the ngOnInit() lifecycle method, you can write what you like and it will be treated like a normal JS canvas

  ngOnInit(): void {
    const updateNetworkStatus = () => {
      const text = window.navigator.onLine ? ' online' : ' offline'
      this.onlineStatus = text
    }
    
    updateNetworkStatus()
    window.addEventListener('offline', updateNetworkStatus)
    window.addEventListener('online', updateNetworkStatus)
  }

I made a video on how to do this on my YouTube channel.

Answer 7

There is a nice way to detect when a child element in Angular is rendered and access it. I found this on Stack Overflow but don't remember where.

  private myElement: ElementRef;
  @ViewChild('mySelector', {static : false}) set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
      // debugger;
      this.myElement = content;
    }
  }


<div #mySelector *ngIf="initiallyFalseThenAfterDbResponseIsTrue"></div>

Answer 8

This example will help you addEventListener and touch-related swipes gestures.

import { Component, HostListener, Input, OnInit } from '@angular/core';
  
export class AppbarComponent implements OnInit {
  
    touchstartX:number = 0;
    touchstartY:number = 0;
    touchendX:number = 0;
    touchendY:number = 0;

    @HostListener('touchstart', ['$event']) gesuredZonestart(event:any) {
      this.touchstartX = event.changedTouches[0].screenX;
      this.touchstartY = event.changedTouches[0].screenY;  
    }
    
    @HostListener('touchend', ['$event']) gesuredZoneend(event:any) {
      this.touchendX = event.changedTouches[0].screenX;
      this.touchendY = event.changedTouches[0].screenY; 
      this.handleGesure(); 
    }

    handleGesure() {
      var swiped = 'swiped: ';
      if (this.touchendX < this.touchstartX) {
          console.log(swiped + 'left!');
      }
      if (this.touchendX > this.touchstartX) {
          console.log(swiped + 'right!');
      }
      if (this.touchendY < this.touchstartY) {
          console.log(swiped + 'down!'); 
      }
      if (this.touchendY > this.touchstartY) {
          console.log(swiped + 'top!');
      }
      if (this.touchendY == this.touchstartY) {
          console.log('tap!');
      }
    }
}