title: Angular 4: show overlay on mouseover with animation based on mouse direction
body: <p>i would like to get <a href="https://codepen.io/azedo/pres/nywlc" rel="noreferrer">this</a> in an Angular4 Component without using Jquery.</p>
  
  <p>I need to show an overlay div with animation based on the mouse direction, both mouseover and mouseout. I tried to rewrite the example code in my component but i cannot get the width and height of the event.target.</p>
  
  <p><strong>My div:</strong></p>
  
  <pre><code>&lt;div (mouseover)='showOverlay($event)'&gt;div to hover&lt;/div&gt;
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>export class MyComponent implements OnInit {
  
      constructor(private _el: ElementRef) {
      }
  
      ngOnInit() {
  
      }
  
      showOverlay(e) {
          const target = e.target;
          console.log(target._el.nativeElement); // Returns undefined
          console.log(target.nativeElement); // Returns undefined
          console.log(target.nativeElement.width); // Error
          console.log(target._el.nativeElement.width); // Error
      }
  }
  </code></pre>
  
  <p>Any idea?</p>
  
  <p>Thank you</p>