CODEWITHSUNDEEP
angularbootstrap-4.1.x
migara thiranagama
migara thiranagama

Reputation: 49

how to change color of text on mouse enter using angular

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

Upvotes: 3

Views: 2171

Answers (2)

Abhishek Gautam
Abhishek Gautam

Reputation: 1767

Your code is correct, just replace onmouseenter with mouseenter 

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

Upvotes: 1

Kunvar Singh
Kunvar Singh

Reputation: 1885

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

          }

Upvotes: 2

Related Questions