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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
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
.