Can I add a function with the (click) event to my span tags that I added with the replace method?

Issue

https://i.stack.imgur.com/B5doW.png I have sentences like this, and as you can see, if the word I'm looking for is in that sentence, I put it in span tags.

.replace(query.toLocaleLowerCase(), `<span>${query}</span>`,).toLocaleLowerCase()

(query is my search word) and I want to make the word taken in these span tags like this

`<span (click)="myFunction()">${query}</span>`

Is there a way to do this ?

Solution

I got the solution like this, it's not quite right, but the simplest

TS Side

click(evt) {
const href = evt.target.localName;

if (href == 'span') {
  evt.path.forEach(element => {
    if (element.localName == "p") {
       ---my codes---
    }
  });
}

}

HTML side;

(click)="click($event)" [innerHtml]="subtitle"

Answered By - Cem Özbey