pass element ref to a method in angular2

Question

I have to check if an element in a list is within the viewport or not.For this i'm using the angular2 plugin angular-inviewport.

What the plugin does is as soon as the card is withing the bottom of the window it return true.I want that the card should be in the center or at least somewhat near to the top of the window before i register the impression. For this i need the reference of the current element and compare it with the window height and Yoffset something like this(the last solution) .

Below is a small snippet from my code and the callback i have.

    <li class="" *ngFor="let data of dataArray; let i=index;">          <div id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;">         </div>    </li> 

even tried adding dynamic ref

<div #data_{{data.Id}} id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;"> 

Not sure if this is correct.

Inside the handlerFunction i want the div reference also.

How can i achieve this. Any suggestion,approach or guidance is welcome!

Thanks

Answer 1

Simply do :

Template Side :

<div #refEl (click)='yourFunc(refEl)'> 

Component Side :

yourFunc(el: HTMLElement){   console.log(el); // you can check the output in the console } 

------------------------ OR --------------------------

Template Side :

<div (click)='yourFunc($event.target)'></div> 

Component Side (Same as above):

WORKING DEMO