title: how to change color of text on mouse enter using angular
body: <p>i am a newbie to programming. I have tried this code but @hostlistner part is not working
   i have used bootstrap version 4</p>
  
  <p>it doesn't give any compile error also</p>
  
  <pre><code> element.nativeElement.style.color = 'red' 
  </code></pre>
  
  <p>this statement is working but</p>
  
  <pre><code> this.element.nativeElement.style.color = 'blue';
  </code></pre>
  
  <p>this one doesn't</p>
  
  <pre><code>      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';
            }
  
            }
  </code></pre>
  
  <p>the code in app</p>