0

I actually want to add (mouseover)="sample()" to some html elements which are generated dynamically when the page loads in the browser

I tried to add the mouseover to the html element by using

const span = document.createElement("span");
  span.className = "highlight";
  span.setAttribute('mouseover', "showToolTip()");

by executing the above code, the mouseover has been added to the dynamic html element in this way :

<span mouseover="showToolTip()">First item</span>

But as I'm using angular I need to wrap the mouseover event with parenthesis, which should look like

<span (mouseover)="showToolTip()">First item</span>

Is there any way to do this?

cheesyprogrammer
  • 5
  • 2

1 Answers1

0

When using native templates injected in the DOM, angular will not parse these parts and discover the directive for the mouseover event. I would suggest adding the native mouseover event instead like so

const span = document.createElement("span");
span.className = "highlight";
span.addEventListener("mouseover", ( event ) => {
   console.log(mouseover,event);
   this.showToolTip();
});

Edit: After some discutions in the comments we made a more complete solution for OP. Stackblitz here

Simplicity's_Strength
  • 793
  • 7
  • 18
  • span.addEventListener("mouseover", ( event ) => { "showToolTip(1)" }); – cheesyprogrammer Apr 21 '21 at 08:55
  • But that didnt work @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 08:56
  • Two things important here, the callback needs to be an arrow function to preserve the "this" reference. Also did you use the quotes there ? This callback should be span.addEventListener("mouseover", ( event ) => { this.showToolTip(1); }); – Simplicity's_Strength Apr 21 '21 at 09:00
  • Updated the answer with the function call, i hope it helps @cheesyprogrammer – Simplicity's_Strength Apr 21 '21 at 09:07
  • I did use the quotes at first. Now I have used what you have commented above and it still doesnt work @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 09:12
  • Will need more context to help you as there must be something else in this issue that's not mentioned here, try creating a minimal reproducible example with a https://stackblitz.com/ – Simplicity's_Strength Apr 21 '21 at 09:38
  • https://stackblitz.com/edit/angular-ivy-pjzbzm?file=src%2Fapp%2Fapp.component.html here is my stackblitz. select text to see the inner html in console.log. In the innerhtml I couldnt bring the mousehover event @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 09:56
  • Perfect , so first we need to add the event when we receive the text not on every click. And used template parsing to add event dynamicaly. Please take a look at this https://stackblitz.com/edit/angular-nativetextonover?file=src/app/app.component.ts – Simplicity's_Strength Apr 21 '21 at 10:11
  • You have put in so much effort thanks but you didnt understand my question I guess. In my inner html i.e the variable text i need to insert the (onmouseover)=showToolTip(1) wherever there is span tag with class highlight. That was the question @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 10:22
  • And that's what we are doing, although i split the mouseover into mouseenter and mouseleave to give more control over showing and hiding the tooltip. when inserting into the div's innerHtml we use div.querySelectorAll(".highlight").forEach(...) to add an event listener onto all spans with class highlight. I beleive you can adapt the current solution to your needs as it does the trick – Simplicity's_Strength Apr 21 '21 at 10:26
  • See after we do your code, if we were to check the innerhtml contents of text it should be like this and not like this @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 10:29
  • As i said in the original response, using the event binding (mouseover) is a strict synthax that is only valid inside angular templates, but here we are on native html so adding (onmouseover)="showToolTip(1)" would not add the event listener as angular internaly parses the template and does exactly what we are doing here addEventListener("mouseover",()=>{...}) in it's template parsing. – Simplicity's_Strength Apr 21 '21 at 10:33
  • Found a similar question on SO https://stackoverflow.com/a/41610950/4217907 – Simplicity's_Strength Apr 21 '21 at 10:37
  • So your saying its impossible. You could have said that firstitself. Okay I am accepting ur answer as u put in so much effort but personally it didnt work for me @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 10:43
  • Sorry we didn't understand each other, i thought you wanted to add event listeners on native html templates, this is what the stackblitz does. Have a nice day sir – Simplicity's_Strength Apr 21 '21 at 10:48
  • yeah you too @Simplicity's_Strength – cheesyprogrammer Apr 21 '21 at 10:51