Event Binding to Text Layer - Mark Long Words example

[Huey-H]

Based on the Text layer - Mark long words example, is there a way to bind a click/hover event to the words highlighted? I tried including the event when adding the class to the words that meet criteria but it doesn't call the function.

[stephanrauh]

What did you do precisely? I understand that you've added an event listener to the <span> tags that marks the highlighted words. Is this correct?

If so, are you sure your function isn't called? Maybe you ran into a different problem. Your function is called, but the change detection of Angular doesn't recognize your changes. You can solve this by adding a setTimeout(). Some time ago, I've written a deep-dive article on the topic: https://www.beyondjava.net/zonejs

[Huey-H]

First of, thank you for your continuous support for this library! That is an interesting read but having trouble wrapping my head around it.

Based on the example code below, when the word is clicked, the function isn't triggered. Any suggestions on how I could force this change detection in Angular?

Example code snippet:

private markOneLongWord(word: string): string {
    if (word.length > 6) {
      return `<div class="long-word" (click)="triggerLongWordClicked(word)">${word}</div>`;
    }
    return word;
  }

public triggerLongWordClicked(word) {
    console.log("long word clicked: ", word);
}

[stephanrauh]

Sorry for responding late. Just in case someone stumbles upon this ticket: (click) doesn't work in this case because it's plain HTML without the Angular magic. So you need to use (onclick). Your method gets called, but Angular doesn't notice unless you put your method body into an ngZone.run() wrapper.