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];


  }
}


<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance"
[infiniteScrollThrottle]="throttle"
(scrolled)="onScrollDown()"
(scrolledUp)="onUp()">
<div *ngFor="let d of data">

<div class="alert alert-primary" >
{{ d }}
</div>

</div>
</div>



@Input() Type Required Default Description
infiniteScrollDistance number optional 2 the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% – 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event.
infiniteScrollUpDistance number optional 1.5 should get a number
infiniteScrollThrottle number optional 150 should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling.
infiniteScrollDisabled boolean optional false doesn’t invoke the handler if set to true
infiniteScrollContainer string / HTMLElement optional null should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.

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

Spread the love
  •  
  •  
  •  
  •  
  • 10
  •  
  •  
  •