Angular 4: Click event in [innerHTML]

Question

After much searching I am trying to find a simple way to execute a method when clicking a link in dynamically created HTML that is being saved in a database. I'm creating messages to users about transactions that have various links embedded in the message body. I need to save the message on the database and when retrieved and viewed, the user should be able to click a link to call a method which will route them to the proper page.

The HTML looks something like this:

"string myHTML='<div><a (click)=method1(tranID)>Execute Method 1></a><div>
<br><br>
<div><a (click)=method2(tranID)>Execute Method 2></a><div>'

In my HTML file I have:

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

I understand that this is by design in Angular but there has to be a reasonably straightforward way to do this. I am not an Angular expert and need some help! Thanks

This is analogous to a SQL Injection attack. By giving you the ability to do this, you would be simultaneously giving people the potential ability to exploit your site by adding unexpected code into data being saved. Bottom line, don't ever save functions as user data. Find a different way to store the data and construct the HTML from the data on demand. — Claies
– Claies, Commented Mar 26, 2018 at 16:31
You can't call an angular component method from outside of the Angular scope (ie: a dynamically created html) . This is as @Claies said a design mistake, try with another more safe database design. — Mehdi Benmoha
– Mehdi Benmoha, Commented Mar 26, 2018 at 16:36
@Claies - Actually want to store page routes. Not functions. — Matt K
– Matt K, Commented Mar 26, 2018 at 17:27

funkizer · Accepted Answer · 2018-03-26 21:35:06Z

12

Assuming your html has links like <a href="/home">home</a>, you can bind the (click) event on the container and catch any bubbled clicks from the dynamically added elemens inside:

<div (click)="click($event)" [innerHTML]="html"></div>

click(evt) {
   const href = evt.target.getAttribute('href');
   if (href) {
      evt.preventDefault();
      this.router.navigate(href);
   }
}

edited Mar 26, 2018 at 21:35

answered Mar 26, 2018 at 18:03

funkizer

4,9171 gold badge21 silver badges21 bronze badges

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

7 Comments

Matt K Over a year ago

This did it! Thank you!

funkizer Over a year ago

Great, np! Edited the answer to just show the (click) way, as I think it's cleanest :)

Matt K Over a year ago

Having another problem with this: When the page initially loads with the dynamic HTML, the click event does not fire. If I reload the page using the browser reload (using Chrome) starts to work and continues to work even if I enter the page with different data.

funkizer Over a year ago

Weird! Hmm. Try *ngIf="html" on the div. Set this.html=null when you start loading the html. Maybe it helps if the container is initialized only when the html is loaded.

Matt K Over a year ago

This didn't work. I assume that the code is not compiled and that the reload compiles it?

|

Collectives™ on Stack Overflow

Angular 4: Click event in [innerHTML]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related