How to bind an Angular 4 (click) event to a dynamically created div

Question

The following section of code creates a div block for me.

var addOns = '';
addOns = '<div class="divcl"><i class="fa fa-refresh" id="'+self.data.id+'" (click)="addTab($event)"></i></div>';
return "<div class='node' id='"+this.data.id+"'>"+addOns+"</div>";

But it turns out that addTab(event) function is not being recognised by Angular. My question is how do I bind an Angular click event to a dynamically created div.

Don't know much about angular or if things work differently there but in plain javascript you could bind event to the parent of that dynamically created `div` and use event delegation via `event.target` — Matus Dubrava, Apr 13 '18 at 21:24
Possible duplicate: https://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2 — Mathias W, Apr 13 '18 at 21:39
check out the console log: https://stackblitz.com/edit/angular-pc7ymb — Vega, Apr 13 '18 at 21:55

score 2 · Answer 1 · edited Apr 13 '18 at 22:04

What you can do is to create an actual HTMLElement and add an eventListener to it and then use appendChild to add it to the DOM.

let addOns = document.createElement('div');
addOns.className ="divcl";
addOns.innerHTML = '<i class="fa fa-refresh" id="'+this.data.id+'"></i>';
this.renderer.listen(addOns, 'click', (event) => {
  this.addTab(event);
})

let node = document.createElement('div');
node.className = 'node';
node.id = this.data.id;
node.appendChild(addOns)

document.querySelector('#stuff').appendChild(node);

https://stackblitz.com/edit/angular-7dffje?file=app%2Fapp.component.ts

How to bind an Angular 4 (click) event to a dynamically created div

1 Answers1