IONIC 4 - How to add a click event dynamically in HTML

Question

I have a function which detect url links with Regex and replace by a span tag.

The replacement works fine, the actual problem is: when I use (click)="myFunction()" on this span, he doesn't compile with the click event, just add on html.

my function:

insertHrefs(content: string): string {
    const links = content.match(/\b(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+/gm);
    const linksReplaced = [];

    // tslint:disable-next-line: forin
    for (const i in links) {
      const link = links[i];
      if (linksReplaced.find(l => l === link)) { continue; }

      content = AppUtils.replaceAll(content, link,
       `<span style="color:#357CFF;" (click)="test()">${link}</span>`
      );
      linksReplaced.push(link);
    }
    return content;
  }

the result: http://prntscr.com/ov8yfc

I need some way to add click event to span tag dynamically.

score 0 · Answer 1 · answered Aug 20 '19 at 18:35

You need to compile the template into elements you can then add into your DOM, without it the browser isn't going to understand what (click)= is.

You can look at this question to see how it can be done. Do note that the first answer was for Angular 2, and was deprecated by Angular 2.something. Another answer is relevant for Angular 4. I suppose the reason for all of this is that compiling templates (or dynamic components) is not something the Angular team really wants you to do.

You can, of course, not compile anything at all, but instead just add a click event to the span element. You will need to look for the elements in your DOM, and then attach the event handler with elem.addEventListener('click', () => { myFunction() });

but how I declare the ```span``` tag as Element to use ```addEventListener```? — Bianca Yameê, Aug 20 '19 at 19:07
Do it after the content is added to the DOM tree. Use document.getElementsByTag or something similar. — zmbq, Aug 20 '19 at 19:35

IONIC 4 - How to add a click event dynamically in HTML

1 Answers1