Angular 2 Hover event

Question

In the new Angular2 framework  does anyone know the proper way to do a hover like an event    In Angular1 there was ng-Mouseover  but that doesn t seem to have been carried over    I ve looked through the docs and haven t found anything

User · Answer

In your js ts file for the html that will be hovered   Output   elemHovered  EventEmitter lt any gt    new EventEmitter lt any gt     onHoverEnter    void       this elemHovered emit   The button was entered   this event       onHoverLeave    void       this elemHovered emit   The button was left   this event       In your HTML that will be hovered    mouseenter     onHoverEnter     mouseleave   onHoverLeave      In your js ts file that will receive info of the hovering  elemHoveredCatch d   void       console log d      In your HTML element that is connected with catching js ts file   elemHovered     elemHoveredCatch  event

User · Answer

yes there is on-mouseover in angular2 instead of ng-Mouseover like in angular 1 x so you have to write this  -  lt div on-mouseover  over    style  quot height 100px  width 100px  background  e2e2e2 quot  gt hello mouseover lt  div gt   over        console log  quot Mouseover called quot         As  Gunter Suggested in comment there is alternate of on-mouseover we can use this too  Some people prefer the on- prefix alternative  known as the canonical form  Update HTML Code -  lt div  mouseover   over     mouseout   out    style  quot height 100px  width 100px  background  e2e2e2 quot  gt hello mouseover lt  div gt   Controller  TS Code - import   Component   from   angular core     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent      name    Angular      over        console log  quot Mouseover called quot           out        console log  quot Mouseout called quot           Working Example Some other Mouse events can be used in Angular -  mouseenter   quot myMethod   quot   mousedown   quot myMethod   quot   mouseup   quot myMethod   quot

User · Answer

You can do it with a host    import   Directive  ElementRef  Input   from   angular core     Directive     selector    myHighlight      host          mouseenter     onMouseEnter           mouseleave     onMouseLeave           export class HighlightDirective     private  defaultColor    blue     private el  HTMLElement     constructor el  ElementRef    this el   el nativeElement        Input  myHighlight   highlightColor  string     onMouseEnter     this highlight this highlightColor    this  defaultColor       onMouseLeave     this highlight null         private highlight color string        this el style backgroundColor   color           Just adapt it to your code  found at  https   angular io docs ts latest guide attribute-directives html

User · Answer

For handling the event on overing  you can try something like this   it works for me    In the Html template    lt div  mouseenter   onHovering  event    mouseleave   onUnovering  event   gt     lt img src           contents ctm-icons alarm svg  class  centering-me  alt  Alerts    gt   lt  div gt    In the angular component       onHovering eventObject        console log  AlertsBtnComponent onHovering         var regExp   new RegExp   svg               var srcObj   eventObject target offsetParent children  0        if  srcObj tagName     IMG             srcObj setAttribute  src   srcObj getAttribute  src   replace regExp    h svg                           onUnovering eventObject        console log  AlertsBtnComponent onUnovering         var regExp   new RegExp   h svg               var srcObj   eventObject target offsetParent children  0        if  srcObj tagName     IMG             srcObj setAttribute  src   srcObj getAttribute  src   replace regExp    svg

User · Answer

If the mouse over for all over the component is your option  you can directly is  hostListener to handle the events to perform the mouse over al below     import  HostListener  from   angular core       HostListener  mouseenter   onMouseEnter         this hover   true      this elementRef nativeElement addClass    edit           HostListener  mouseleave   onMouseLeave         this hover   false      this elementRef nativeElement addClass    un-edit         Its available in  angular core  I tested it in angular 4 x x

User · Answer

Simply do  mouseenter  attribute in Angular2      In your HTML do      lt div  mouseenter   mouseHover  event   gt Hover  lt  div gt     and in your component do   import   Component  OnInit   from   angular core     Component     selector   component     templateUrl     component html     styleUrls      component scss       export class MyComponent implements OnInit      mouseHover e        console log  hovered   e

User · Answer

If you want to perform a hover like event on any HTML element  then you can do it like this   HTML    lt div  mouseenter    mouseEnter  div a       mouseleave    mouseLeave  div A    gt           lt h2 gt Div A lt  h2 gt    lt  div gt     lt div  mouseenter    mouseEnter  div b      mouseleave    mouseLeave  div B    gt           lt h2 gt Div B lt  h2 gt    lt  div gt    Component  import   Component   from   angular core     Component       moduleId  module id      selector   basic-detail       templateUrl   basic component html      export class BasicComponent      mouseEnter div   string         console log  mouse enter       div            mouseLeave div   string        console log  mouse leave      div            You should use both mouseenter and mouseleave events inorder to implement fully functional hover events in angular 2

User · Answer

If you are interested in the mouse entering or leaving one of your components you can use the  HostListener decorator   import   Component  HostListener  OnInit   from   angular core     Component     selector   my-component     templateUrl     my-component html     styleUrls      my-component scss      export class MyComponent implements OnInit       HostListener  mouseenter      onMouseEnter         this highlight  yellow            HostListener  mouseleave      onMouseLeave         this highlight null                 As explained in the link in  Brandon comment to OP  https   angular io docs ts latest guide attribute-directives html

User · Answer

Component       selector   drag-drop       template             lt h1 gt Drag  n Drop lt  h1 gt           lt div  container               class  container                mousemove   onMouseMove  container   gt               lt div  draggable                   class  draggable                    mousedown   onMouseButton  container                     mouseup   onMouseButton  container   gt               lt  div gt           lt  div gt          http   lishman io angular-2-event-binding

[javascript] Angular 2 Hover event

Examples related to javascript

Examples related to angular

Examples related to events

Examples related to hover