I have a method in my `component.ts` that returns some html like this:

```
someMethod() {
    return `
      <div>hello</div>
    `;
}

```

I would like to return a div with a mouseover event but It seems like the angular way of `(mouseenter)="myFunction()"` doesnt work. Probably since it is returned html and that is not compiled.

```
someMethod() {
    return `
      <div (mouseenter)="myFunction()">hello</div>
    `;
}

```

So I found that doing the regular javascript way `onmouseover="myFunction()"` does indeed trigger the function:

```
someMethod() {
    return `
      <div onmouseover="myFunction()">hello</div>
    `;
}

```

But the issue with this, is that I get the error `Uncaught ReferenceError: myFunction is not defined`

`myFunction()` is a method in the same `component.ts` file as `someMethod()` which returns the html

How can I fix my issue, or is there another way to write this?