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.