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 : https://www.npmjs.com/package/ngx-infinite-scroll. — ibenjelloun, Jun 07 '18 at 14:53
It is open source, you can read the code for inspiration then create your own implementation without adding the lib : https://github.com/orizens/ngx-infinite-scroll — ibenjelloun, Jun 07 '18 at 15:00
@Sanjay don't try to reinvent wheel again, you could end putting extra effort :p — Pankaj Parkar, Jun 07 '18 at 15:00
@PankajParkar That's how you learn stuff. Effort is a part of learning :) — Axel, Jun 07 '18 at 15:07
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, Jun 07 '18 at 15:15
@PankajParkar “Productivity is being able to do things that you were never able to do before.” ~ Franz Kafka! I believe in that. Anyway, it's not that I don't use the third-party packages. Instead, I always try to minimize the usage of these packages and code from scratch. This method trains my coding skill. As a matter of fact, there comes a time when you won't be able to do all by yourself. And, I met with Angular at that particular time. I hope I have answered your question. — Axel, Jun 07 '18 at 15:31

score 26 · Accepted Answer · answered Jun 12 '18 at 09:00

26

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 '18 at 09:00

ibenjelloun

7,425
2
29
53

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. – Jason Liu Oct 12 '18 at 22:38
5

adding window.scrollY * 1.1 effectively pre-loads pages and gives a slightly nicer experience – Mathias Andersen Dec 18 '19 at 09:14
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. – ibenjelloun Dec 18 '19 at 09:36

score 0 · Answer 2 · answered Jun 09 '23 at 11:15

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>

Angular Load Data on Scroll [For Loop]

2 Answers2

Linked