Adding eventListener to several items in Angular

Question

I add some HTML to the DOM dynamically. There are several hyperlinks with class someClass and different ids. And after I add them to template I add event listener to them so when I click them id is logging.

this.HTMLdiv = this.domSanitizer.bypassSecurityTrustHtml(this.HtmlString);
this.changeDetectorRef.detectChanges();
this.elementRef.nativeElement.querySelector('.someClass').addEventListener('click', (e) => console.log(e.path[1].id));

Problem is that this event listener is added only to first element. How can I add it to all elements with class someClass?

Barremian · Accepted Answer · 2020-06-05 14:11:01Z

2

You could use the querySelectorAll() function. Try the following

this.HTMLdiv = this.domSanitizer.bypassSecurityTrustHtml(this.HtmlString);
this.changeDetectorRef.detectChanges();
const elements = this.elementRef.nativeElement.querySelectorAll('.someClass');
elements.forEach((element) => element.addEventListener('click', (e) => console.log(e.path[1].id)));

edited Jun 5, 2020 at 14:11

answered Jun 5, 2020 at 13:50

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barremian Over a year ago

That's the injected ElementRef. I've modified the answer.

Collectives™ on Stack Overflow

Adding eventListener to several items in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related