addEventListener on dynamically created elements not working

Question

I want to add click events to images present in inner html. But when I try to add it, it won't work.

Template

<div [innerHTML]="myHtml"></div>

Code

myHtml;

ngOnInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

Here is the stackblitz

@Suhel Khan if you want to select and addEventListener all `` you can check my answer — Mukyuu, Jan 23 '19 at 10:32

score 2 · Accepted Answer · answered Jan 22 '19 at 07:19

2

You need to use ngAfterViewInit() to achieve this, I have modified the code and is working fine.

Please check the link https://stackblitz.com/edit/angular-7da7cd

Hope this helps.

answered Jan 22 '19 at 07:19

Santhosh mp

559
7
12

score 2 · Answer 2 · answered Jan 22 '19 at 10:16

You can use elementRef for specifying <img> element. Then you can use the following to add event listener into all <img>:

ngAfterViewInit() {
    var elem = this.elementRef.nativeElement.querySelectorAll('img');
    if (elem) {
      elem.forEach(res => {
        res.addEventListener('click', this.onclick.bind(this));
      })
    }
}

Note that:

onclick() {
    alert("Image clicked");
}

is a custom function which you can customize. And don't forget to import { ElementRef } from '@angular/core';

Stackblitz Fork.

More detail into AfterViewInit, .bind, the difference between ElementRef and Renderer

score 1 · Answer 3 · answered Jan 22 '19 at 06:11

1

This may be due to restriction that event listener will be registered only for elements before page cycle starts. Did you try doing it more angular-ish way by Renderer2

this.renderer.listen('img', 'click', (evt) => {
  console.log('Clicking the document', evt);
});

Docs : https://angular.io/api/core/Renderer2

answered Jan 22 '19 at 06:11

Aravind Anil

153
1
9

1

Thanks, this is also work, but instead of 'img' target good to send the nativeElement of the required element – Suhel Jan 22 '19 at 08:02

score 1 · Answer 4 · answered Jan 22 '19 at 06:47

Its not yet in the DOM. Do the same with ngAfterViewInit:

ngAfterViewInit() {
    const root = document.createElement('div');
    root.innerHTML = this.getHtml();
    const images = root.getElementsByTagName('img');
    Array.prototype.forEach.call(images, (image: HTMLImageElement, i) => {
      image.addEventListener('click', (event: any) => {
        console.log('click', event);
      });
    });
    this.myHtml = root.innerHTML;
  }

addEventListener on dynamically created elements not working

4 Answers4

Linked