Tengo que verificar si un elemento en una lista está dentro de la ventana gráfica o no. Para esto, estoy usando el complemento angular2 angular-inviewport .
Lo que hace el complemento es que tan pronto como la tarjeta está en la parte inferior de la ventana, vuelve a ser verdadero. Quiero que la tarjeta esté en el centro o al menos cerca de la parte superior de la ventana antes de registrar la impresión. Para esto, necesito la referencia del elemento actual y compararlo con la altura de la ventana y Yoffset algo como esto (la última solución).
A continuación se muestra un pequeño fragmento de mi código y la devolución de llamada que tengo.
<li class="" *ngFor="let data of dataArray; let i=index;"> <div id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card mb-" style="height:auto;"> </div> </li>incluso intenté agregar una referencia dinámica
<div #data_{{data.Id}} id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card mb-" style="height:auto;">No estoy seguro si esto es correcto.
Dentro de handlerFunction también quiero la referencia div.
Cómo puedo conseguir esto. ¡Cualquier sugerencia, enfoque u orientación es bienvenida!
Gracias
Simplemente haz:
Lado de la plantilla:
<div #refEl (click)='yourFunc(refEl)'>Lado del componente:
yourFunc(el: HTMLElement){ console.log(el); // you can check the output in the console }------------------------ O ------------------------- -
Lado de la plantilla:
<div (click)='yourFunc($event.target)'></div>Lado del componente (igual que arriba):