Angular 14 ngx-virtual-scroller Example to Load Dynamic Data inside Infinite Scroller in Browser Using TypeScript

Welcome folks today in this blog post we will be using the ngx-virtual-scroller library in angular 14 to load dynamic data on button click inside the infinite scroller in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleproject

cd sampleproject

And after that you need to install the below libraries using the below command as shown below

npm i ngx-virtual-scroller

And after that you will see the below directory structure of the angular app as shown below

And now you need to go to app.module.ts file and include the module as shown below

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { VirtualScrollerModule } from 'ngx-virtual-scroller';
@NgModule({
  imports:      [ BrowserModule, FormsModule, VirtualScrollerModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { HelloComponent } from './hello.component';

import { VirtualScrollerModule } from 'ngx-virtual-scroller';

@NgModule({

imports: [ BrowserModule, FormsModule, VirtualScrollerModule ],

declarations: [ AppComponent, HelloComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

As you can see we are including the FormsModule and the VirtualScrollerModule and adding it inside the imports array.

And now we need to go to app.component.html file and copy paste the following code

app.component.html

<virtual-scroller #scroll [items]="items" 
  (vsUpdate)="onVsUpdate($event)"
  (vsChange)="onVsChange($event)"
  (vsStart)="onVsStart($event)"
  (vsEnd)="onVsEnd($event)"
>
    <div *ngFor="let item of scroll.viewPortItems">
      <p>name : {{item.name}}</p>
    </div>
</virtual-scroller>

<button (click)="appendData()">append data</button>

<virtual-scroller #scroll [items]="items"

(vsUpdate)="onVsUpdate($event)"

(vsChange)="onVsChange($event)"

(vsStart)="onVsStart($event)"

(vsEnd)="onVsEnd($event)"

</div>

</virtual-scroller>

<button (click)="appendData()">append data</button>

As you can see we have the infinite-scroller directive and inside it we are passing the different events and also the items which will be a simple list of items which will be displayed inside the virtual scroller and lastly we have the button when pressed it will load more data and add it to the list in the scroller.

And now we need to go to app.component.ts file and copy paste the following code

app.component.ts

import { Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { VirtualScrollerComponent } from 'ngx-virtual-scroller';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items = [];

  @ViewChild('scroll') scroller: VirtualScrollerComponent;

  constructor(private cd: ChangeDetectorRef) {
    for (let i = 1; i < 10; i++) {
      this.items.push({name: "Item " + i});
    }
  }

  appendData() {
    this.items.push({name: "Item " + (this.items.length + 1)})
    this.items = this.items.slice();
    this.scroller.scrollToIndex(this.items.length);
  }

  onVsUpdate(event) {
    console.log('vs update', event);
  }

  onVsChange(event) {
    console.log('vs change', event);
  }

  onVsStart(event) {
    console.log('vs start', event);
  }

  onVsEnd(event) {
    console.log('vs end', event);
  }
}

import { Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

import { VirtualScrollerComponent } from 'ngx-virtual-scroller';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

items = [];

@ViewChild('scroll') scroller: VirtualScrollerComponent;

constructor(private cd: ChangeDetectorRef) {

for (let i = 1; i < 10; i++) {

this.items.push({name: "Item " + i});

}

appendData() {

this.items.push({name: "Item " + (this.items.length + 1)})

this.items = this.items.slice();

this.scroller.scrollToIndex(this.items.length);

}

onVsUpdate(event) {

console.log('vs update', event);

}

onVsChange(event) {

console.log('vs change', event);

}

onVsStart(event) {

console.log('vs start', event);

}

onVsEnd(event) {

console.log('vs end', event);

}

As you can see we have the items array variable and inside the method we are running the simple for loop to loop through the items and adding a new item object and appending it to the items variable. And then we have the different events attached to the virtual scroller.