43

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Shruti Nair
  • 1,982
  • 8
  • 30
  • 57

1 Answers1

101

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

Julien
  • 2,616
  • 1
  • 30
  • 43
Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
  • 12
    hi,can the refEl be dynamic.This li is repeated using ngFor – Shruti Nair Feb 09 '18 at 08:04
  • 3
    @ShrutiNair , yes it will pass the ref to the current element from function – Vivek Doshi Feb 09 '18 at 08:05
  • 1
    How can that be done.i have updated answer with a snippet can you check? using #data_{{data.Id}} – Shruti Nair Feb 09 '18 at 08:15
  • 2
    @ShrutiNair , there is no need to do #data_{{data.Id}} , then you can access all ref via ViewChildren that will give you access of all references . – Vivek Doshi Feb 09 '18 at 08:47
  • @ShrutiNair: Would this work for a custom input which is being embedded in the parent component multiple times, so that I can have a different element ref for each input? – k.vincent Jul 02 '18 at 14:14
  • @VivekDoshi: how can I use this option to target a specific input and get its value using a button not the input itself? I have an input element as child component and it's being binded in a parent component with `ngFor`. So ElementRef should be generated dynamically for each element to target each input and get the value. – k.vincent Dec 03 '18 at 13:32
  • 5
    Not sure this works as expected. If you change the code using ElementRef in this way -> checkEl(el: ElementRef) { console.log(el.nativeElement); } gets undefined – DevT Jun 10 '19 at 08:11
  • @DevT , Please check the demo, I have shown both ways :). – Vivek Doshi Jun 10 '19 at 08:51
  • @k.vincent did you find the answer to your question? – IcedDante Nov 15 '19 at 03:25
  • $event.target returns the item I clicked on (which happens to be a inside the element containing the click handler). I just want the element on which the function was specified. How would you do that ? – Jitin May 07 '21 at 04:17