CODEWITHSUNDEEP
javascriptangulardomngfor
IngBond
IngBond

Reputation: 668

How detect visible elements inside div container angular 2

I'm trying to get visible elements in scrolled div (after init or scroll).
My data elements have a different height.

Framework is Angular 8.

html example:
<div id="container" style="height: 300px; overflow-y: scroll">
    <div *ngFor="let hero of heroes">
        {{ hero.name }}
    </div>
</div>

getVisibleElements(elements) {
  // in this function I want to get the elements that the user sees in container
}

Upvotes: 0

Views: 1039

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

Short answer is to use the ViewChildren decorator then loop over the children and get their height using nativeElement.

Untested, but probably like this. First add something to the div you're looping over:

<div id="container" style="height: 300px; overflow-y: scroll">
    <div *ngFor="let hero of heroes" #hero>
        {{ hero.name }}
    </div>
</div>

Then get the query list in your typescript code:

@ViewChild('hero')
heros: QueryList<ElementRef>;

Then just loop over the QueryList:

getVisibleElements(elements) {
  let totalHeight = 0;
  heros.forEach(hero => {
    totalHeight += hero.nativeElement.offsetHeight;
  });
  console.log('total height' + totalHeight);
}

Upvotes: 1

Related Questions