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?

Answer 1

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.