how to change color of text on mouse enter using angular

Question

i am a newbie to programming. I have tried this code but @hostlistner part is not working i have used bootstrap version 4

it doesn't give any compile error also

 element.nativeElement.style.color = 'red'

this statement is working but

 this.element.nativeElement.style.color = 'blue';

this one doesn't

      import { Directive, ElementRef, HostListener } from '@angular/core';

         @Directive({
          selector: '[setmycolor]'
           })
          export class SetmycolorDirective {

          constructor(private element:ElementRef) {
          element.nativeElement.style.color = 'red';
          }


          @HostListener('onmouseenter')onMouseEnter(){
          this.element.nativeElement.style.color = 'blue';
          }

          }

the code in app

addind an event listener in javascript is object.addEventListener("mouseenter", myScript). Then as @JBNizet said , is mouseenter — CREM, May 01 '19 at 14:09
this may help: https://stackoverflow.com/questions/51491225/how-to-use-mouseover-and-mouseout-in-angular-6 — Hasnain Ali Sohrani, May 01 '19 at 14:13
I understand this may be an academic / learning exercise for the mouse events or hostlisteners in angular, but the way I'd usually handle this is with the css :hover selector which is much simpler and performs better. — bryan60, May 01 '19 at 14:47

score 2 · Answer 1 · answered May 01 '19 at 14:10

Try below :

The name of the listening event is mouseenter, not onmouseenter. Hopefully you got it.:)

 import { Directive, ElementRef, HostListener } from '@angular/core';

         @Directive({
          selector: '[setmycolor]'
           })
          export class SetmycolorDirective {

          constructor(private element:ElementRef) {
          element.nativeElement.style.color = 'red';
          }


          @HostListener('mouseenter') onMouseEnter(){ //SEE HERE
          this.element.nativeElement.style.color = 'blue';
          }

          }

score 1 · Accepted Answer · answered May 01 '19 at 14:40

1

Your code is correct, just replace onmouseenter with mouseenter

@HostListener('mouseenter') onMouseEnter(){
          this.element.nativeElement.style.color = 'blue';
          }

answered May 01 '19 at 14:40

Abhishek Gautam

1,617
3
18
29

how to change color of text on mouse enter using angular

2 Answers2