Ionic 4 | Implement Infinite Scroll List with Virtual Scroll List in Ionic 4 Application

Ionic Framework provides two very powerful methods to load a large number of list items in mobile application very efficiently. First is Infinite Scroll list container which we have already discussed and the other one is Virtual Scroll list component.

Infinite Scroll list is related loading of list items in form of chunks when user scroll list items and reaches the bottom then a new set of items are loaded and added to the existing list. This makes listing very easy to manage and display and doesn’t dump at once. You can check this post on Infinite Scroll list.

In this article, we will discuss Virtual Scroll list. Ionic’s virtual list is similar to Angular Material’s  Virtual Infinite Scroll list.

Virtual Scroll lists are used to optimize performance where only a small subset of actual records are rendered in HTML which seems to be an Infinite list. The virtual scroll is used where a number of records are really huge and can cause performance issues.

Here we will Implement Infinite Scroll lists with Virtual Scroll, the combination of these two can greatly improve the performance and provide an easy user experience in parallel.

Let’s get started!

Create a new Ionic 4 Application

Make sure you have the latest version of IOnic CLI installed which is 4.10.2 at time of this article

$ npm install -g ionic

Create Ionic 4 app using below command

$ ionic start Ionic4VirtualInfiniteScrollDemo blank
$ cd Ionic4VirtualInfiniteScrollDemo


Add Virtual Scroll & Infinite Scroll Component in Home Page

In file replace following HTML code

      Ionic 4 Virtual & Infinite Scroll Container Demo

<ion-content padding>

  <ion-virtual-scroll [items]="dataList">
    <ion-item *virtualItem="let item">
      {{ item }}

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
      loadingText="Loading more data...">


ion-virtual-scroll takes dataSet in [items] attribute

ion-infinite-scroll directive keeps track when the user reached the bottom, it calls a method defined in even handler ionInfinite 

ion-infinite-scroll-content directive can be used to customize the loader or text which shows up when a method is called and data loading is in process


Then in file replace following code with methods which we are calling from Infinite web component.

Here we have for loop to add dummy data on page load and loadData method call in dataList of type any. When list reached bottom loadData method is called, in a real application, this can be an HTTP call on success or error of which we need to call; which will stop loader. can be set to true or false to enable or disable infinite scroll functionality.

To render the updated list in Virtual Scroll we need to call this.virtualScroll.checkEnd();  method in loadData method below.

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll, IonVirtualScroll } from '@ionic/angular';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;


  constructor() {
    this.dataList = [];
    for (let i = 0; i < 50; i++) { 
      this.dataList.push("Item number "+(this.dataList.length+1));

  loadData(event) {
    setTimeout(() => {
      for (let i = 0; i < 50; i++) { 
        this.dataList.push("Item number "+(this.dataList.length+1));
      //Hide Infinite List Loader on Complete;

      //Rerender Virtual Scroll List After Adding New Data

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.dataList.length == 1000) { = true;
    }, 500);

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;


By using the above simple method we can Inifite scroll list to load large list items in chunks making application usability very easy and more convenient. See more details on Ionic 4 Virtual Scroll list with Infinite Scroll list here.

0 0 vote
Article Rating
Notify of
1 Comment
Oldest Most Voted
Inline Feedbacks
View all comments
10 months ago

I have done this but ion-inscroll not fired