How to use mouseover and mouseout in Angular 6

Question

I have this older Angular code which works but not in the latest version of Angular 6    lt div ng-mouseover  changeText true  ng-mouseleave  changeText false  ng-init  changeText false  gt     lt span ng-hide  changeText  gt Hide lt  span gt     lt span ng-show  changeText  gt Show lt  span gt   lt  div gt    How do i make this work for Angular 6  I understand I have to use  mouseover  and  mouseout  but I couldn t implement it successfully

User · Accepted Answer

The Angular6 equivalent code should be    app component html   lt div  mouseover   changeText true   mouseout   changeText false  gt     lt span  ngIf   changeText  gt Hide lt  span gt     lt span  ngIf  changeText  gt Show lt  span gt   lt  div gt    app component ts   Component      selector   app-main      templateUrl     app component html     export class AppComponent       changeText  boolean      constructor            this changeText   false            Notice that there is no such thing as  scope anymore as it existed in AngularJS  Its been replaced with member variables from the component class  Also  there is no scope resolution algorithm based on prototypical inheritance either - it either resolves to a component class member  or it doesn t

User · Answer

CSS solution works without a glitch  https   www w3schools com code tryit asp filename GJ4PCJMVQ4LN https   www w3schools com code tryit asp filename GJ4PPLCCEBRG  x000D   x000D   col-info hover gt  popoverIcon       visibility  visible          popoverIcon     visibility  hidden    x000D   lt div  ngFor  let i of  1 2 3 4   gt      lt div class  col-info  gt       lt span class   popoverIcon   gt Show   i   lt  span gt     lt  div gt    lt  div gt  x000D   x000D   x000D

User · Answer

lt div  mouseenter   quot changeText true quot   mouseout   quot changeText false quot  gt     lt span  ngIf  quot  changeText quot  gt Hide lt  span gt     lt span  ngIf  quot changeText quot  gt Show lt  span gt   lt  div gt   and if you want to use in  ngFor then assign the object value of hover data and then check its id and show hover info icon or anything like that -   lt div  mouseenter   quot hoverCard d  quot   mouseleave   quot hoverCard null  quot   ngFor  quot let d of data quot  class  quot col-lg-3 col-md-4 col-sm-6 mt-4 quot  gt      lt a  ngIf  quot hoverData  amp  amp  hoverData id    d id quot  class  quot text-right quot  gt  lt i class  quot fas fa-edit quot  gt  lt  i gt Hover Text lt  a gt      Normal Text    lt  div gt   in TS File   hoverData  Data null     hoverCard d  Data null       this hoverData   sCatg

User · Answer

Adding to what was already said   if you want to  ngFor an element   and hide   show elements in it  on hover  like you added in the comments  you should re-think the whole concept   a more appropriate way to do it  does not involve angular at all  I would go with pure CSS instead  using its native  hover property   something like   App Component css  div span only-show-on-hover       visibility  hidden    div hover span only-show-on-hover        visibility  visible      App Component html     lt div  ngFor  let i of  1 2 3 4    gt  hover me please       lt span class  only-show-on-hover  gt you only see me when hovering lt  span gt     lt  div gt    added a demo  https   stackblitz com edit hello-angular-6-hvgx7n file src 2Fapp 2Fapp component html

User · Answer

In HTML   lt div  mouseover   quot funcName1    mouseout   quot funcName2   quot  gt        Do what you want   lt  div gt   In TypeScript  funcName1       Do Something   funcName2      Do Something

User · Answer

If your interested   then go with directive property   Code might looks bit tough   but itshows all the property of Angular 6   Here am adding a sample code  import   Directive  OnInit  ElementRef  Renderer2  HostListener HostBinding Input  from   angular core   import   MockNgModuleResolver   from   angular compiler testing     import   Event   from   angular router     Directive     selector    appBetterHighlight      export class BetterHighlightDirective implements OnInit      defaultcolor  string    black     Highlightedcolor   string    red       HostBinding  style color   color   string   this defaultcolor     constructor private elm   ElementRef   private render Renderer2      ngOnInit       HostListener  mouseenter   mouseover event  Event       this color  this Highlightedcolor      HostListener  mouseleave   mouseleave event  Event       this color   this defaultcolor        Just use the selector name  appBetterHighlight  anywhere in the template to access this  property

User · Answer

You can use  mouseover  and  mouseout  events      component ts   changeText boolean true       component html    lt div  mouseover   changeText true   mouseout   changeText false  gt     lt span  hidden   changeText  gt Hide lt  span gt     lt span  hidden    changeText  gt Show lt  span gt   lt  div gt

User · Answer

To avoid blinking problem use following code its not mouseover and mouseout instead of that use mouseenter and mouseleave     app component html         lt div  mouseenter   quot changeText true quot   mouseleave   quot changeText false quot  gt         lt span  ngIf  quot  changeText quot  gt Hide lt  span gt         lt span  ngIf  quot changeText quot  gt Show lt  span gt       lt  div gt     app component ts     Component      selector   app-main      templateUrl     app component html     export class AppComponent       changeText  boolean      constructor            this changeText   false

[angular] How to use mouseover and mouseout in Angular 6

Examples related to angular