(click) handler on dynamic text

Ionic Framework ionic-v3
1

If somebody could point me in the right direction, it would be hugely appreciated - I’m just not sure what to search for (term, concept, component, etc). And if code snippets, etc., help please let me know.

I’m building in Ionic 3, targeting iOS and Android.

I have a comment list populating from my server via json and would like to embed “links” in those comments that navigate to a separate view with navParams when clicked. For example, there may be hashtags and/or @ mentions in the comment as below:

Hey @homer check out #simpsons for related information.

I’ve got the regex to parse these out and format them, but I can’t figure out how to assign an event handler for a click dynamically.

Here’s the function/method that I’m working on, that inserts HTML into the comment. I’m totally fine with doing it another way.

  formatComment(data) {
    data = data.replace(/#(\S*)/g,'<a href="" (click)="console.log(\'Click Event Fired\')">#$1</a>');
    return this._sanitizer.bypassSecurityTrustHtml(data);
  }

Again, thanks so much in advance.

1 Like
2

You could use a pipe to perform this. If you’re not familiar with pipes https://www.joshmorony.com/how-to-use-pipes-to-manipulate-data-in-ionic-2/

3

I would use this strategy.

4

@philipgriffin Brilliant, many thanks. I’ve actually used one before, and feel like a bonehead for not thinking of it. I’ll try it out and see!

5

@rapropos Thanks so much.

In the end, I went a different route. Instead of trying to assign a click handler to particular parts of a returned and displayed string, I actually parsed that string into an array (split by ’ ') and looped through elements with them in the content of a *ngFor loop. It was straightforward to assign a click event on these, which would just check for it being a hashtag or @ mention and act accordingly.

Great community here, learning a whole lot.