Infinite Scroll in Angular

In this article, we’ll learn how to implement results display as an infinite scroller in Angular application. Its also called load more data. after a certain amount of scrolling the data.
For Infinite Scroll we used “ngx-infinite-scroll” plugin for implementing infinite scroll.
Let’s create a new project to demo for infinite scroll. For that, first, we need an angular project to create a project run below command.

ng new infinite-scroll-demo

“infinite-scroll-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd infinite-scroll-demo”. To Run angular applications, it required to run “ng serve”.
After that, we need to install the “ngx-infinite-scroll” npm package in our application. run below command to install.

npm i ngx-infinite-scroll

After installing the module we need to add “InfiniteScrollModule” in our app.module.ts file.
Display in the below code.

import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  declarations: [...],
  imports: [
.......,
InfiniteScrollModule 
     
  ],
  bootstrap: [...]
})

export class AppModule { }

After import, we can use it in our component. let’s take a simple example list of users first we show 40 users when we scroll it will add more user. For that, add the below code in your app.component.ts & app.component.html file.

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  data = [];
  sum = 40;
  throttle = 300;
  scrollDistance = 1;
  scrollUpDistance = 2;
  direction = '';

  constructor() {
    this.appendItems(0, this.sum);
  }

  addItems(startIndex, endIndex, _method) {
    for (let i = 0; i < this.sum; ++i) {
      this.data[_method]([i, ' ', this.generateName()].join(''));
    }
  }
  
  appendItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, 'push');
  }
  
  prependItems(startIndex, endIndex) {
    this.addItems(startIndex, endIndex, 'unshift');
  }

  onScrollDown () {
    console.log('scrolled down!!');
    const start = this.sum;
    this.sum += 20;
    this.appendItems(start, this.sum);
    
    this.direction = 'down'
  }
  

  generateName() {
    
    const names = ["Jems", "Jenny", "Jhon", "Alex", "Aly", "Stuart", "Prter","Parker","Mark"];

    const random = Math.floor(Math.random() * names.length);

    return names[random];


  }
}

For more API function you can refer their document.

Output

Below is the full embeded code for the paging . you can easily used in your application.
Example