Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
Menu

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

Posted on January 31, 2023

 

 

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

 

 

TypeScript
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

 

 

TypeScript
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.

 

 

 

 

Recent Posts

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme