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

Answer 1

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';
          }

          }

Answer 2

Your code is correct, just replace onmouseenter with mouseenter

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