Categories
Angular Answers

How to add click binding to HTML rendered with innerHTML with Angular?

Spread the love

Sometimes, we want to add click binding to HTML rendered with innerHtml with Angular.

In this article, we’ll look at how to add click binding to HTML rendered with innerHTML with Angular.

How to add click binding to HTML rendered with innerHTML with Angular?

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

For instance, we write

elementRef.nativeElement.querySelector("a").addEventListener("click", () => {
  //...
});

to get element ref to the element that has the innerHTML binding with elementRef.nativeElement.

Then we call querySelector on it to get the anchor element that we want to add the click listener for.

And then we call addEventListener to add the click event listener.

Conclusion

To add click binding to HTML rendered with innerHTML with Angular, we can add a click event listener with plain JavaScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *