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

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 1:^[1]

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"

Solution 2:^[2]

Have you tried

.replace(query.toLocaleLowerCase(), `<span onclick="functionName()">${query}</span>`,).toLocaleLowerCase()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Cem Özbey
Solution 2	Peter

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]