Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
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

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme