Angular Load Data on Scroll [For Loop]

Question

I am showing the data related to the search term. This data shows all the results at once.

What I want to do is show 6 data once and load the remaining on a scroll.

<li *ngFor="let category of categories">
  {{ category.name }}
</li>

How can I show data on scroll?

You could use ngx-infinite-scroll : npmjs.com/package/ngx-infinite-scroll. — ibenjelloun
– ibenjelloun, Commented Jun 7, 2018 at 14:53
It is open source, you can read the code for inspiration then create your own implementation without adding the lib : github.com/orizens/ngx-infinite-scroll — ibenjelloun
– ibenjelloun, Commented Jun 7, 2018 at 15:00
@Sanjay don't try to reinvent wheel again, you could end putting extra effort :p — Pankaj Parkar
– Pankaj Parkar, Commented Jun 7, 2018 at 15:00
I believe in the same. But productivity matters alot. Sometime using well known third party package, and going though there their code taught me a lot. May I know the reason why you chosen Angular? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 7, 2018 at 15:15

ibenjelloun · Accepted Answer · 2018-06-12 09:00:52Z

27

You could listen to the window:scroll events and load data when the scroll reaches the bottom of the page :

  @HostListener("window:scroll", [])
  onScroll(): void {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      // Load Your Data Here
    }
  }

Here is a running stackblitz.

answered Jun 12, 2018 at 9:00

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jason Liu Over a year ago

The only issue with it is when resizing the page until no scroll bar on the page, the page cannot load the rest of the data.

Mathias Andersen Over a year ago

adding window.scrollY * 1.1 effectively pre-loads pages and gives a slightly nicer experience

ibenjelloun Over a year ago

Thank you Mathias for your suggestion, how did you test that ? Can you make a fork with your change and explain how I could notice the difference. Thank you.

Surya R Praveen · Accepted Answer · 2023-06-09 11:15:23Z

To auto load data using scroll, we can get the element or div scrollHeight and match with window scroll Y axis height and execute. Here is the code below. Hope it helps

results.component.ts

 page: number = 1;

 @HostListener('window:scroll', ['$event'])
  scrollHandler(event: any) {
    var insightsResults = document.getElementsByClassName(
      'insights-results'
    )[0];
    var childInsights = insightsResults?.scrollHeight;
    var windowScroll = window.scrollY;
    if (Math.floor(windowScroll) >= Math.floor(childInsights)) {
        this.loadMore();
    }
  }
  
  
   loadMore(): void {
    this.page++;
  }

results.component.html

<ul
      *ngIf="insights && insights.length"
      class="insights-results__card-list"
      (scroll)="scrollHandler($event)">
      <li
        class="insights-results__card"
        *ngFor="let card of insights | slice: 0:pageSize * page">
        <app-insights-card
          [locale]="locale"
          [data]="card"
          variant="vertical"
        ></app-insights-card>
      </li>
    </ul>

 <div
      *ngIf="insights && insights.length > pageSize * page"
      class="insights-results__button-wrapper">
      <button
        class="insights-results__button"
        (click)="loadMore()"
        [disabled]="pageLoading">
        <span *ngIf="!pageLoading">{{ data.seeMoreResultsCtaText }}</span>
        <span *ngIf="pageLoading">{{ data.loadingText }}</span>
      </button>
    </div>

Collectives™ on Stack Overflow

Angular Load Data on Scroll [For Loop]

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related