Combining ion-refresher and ion-infinite-scroll in Ionic allows you to implement a pull-to-refresh functionality along with infinite scrolling for your list or content. Here's how you can achieve this:

  1. First, make sure you have the necessary components imported in your module and are using them in your template.

  2. In your template (e.g.,, include both the ion-refresher and ion-infinite-scroll components within your ion-content:

<ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <!-- Your list or content goes here --> <ion-list> <!-- List items or content --> </ion-list> <ion-infinite-scroll (ionInfinite)="loadData($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>
  1. In your component (e.g.,, implement the necessary functions for the refresh and infinite scroll:
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: '', styleUrls: [''], }) export class HomePage { // Your data array, e.g., listItems listItems: any[] = []; constructor() { // Initialize your data or fetch data from an API this.loadData(); } // Function to handle the pull-to-refresh event doRefresh(event: any) { // Fetch new data or update the existing data // For example, fetch new items from an API this.loadData(); // Complete the refresh operation after data is loaded; } // Function to handle the infinite scroll event loadData(event?: any) { // Fetch more data or append data to the existing list // For example, fetch more items from an API // For demonstration, let's add some random items for (let i = 0; i < 10; i++) { this.listItems.push({ id: this.listItems.length + 1, text: `Item ${this.listItems.length + 1}` }); } // You may stop the infinite scroll if there is no more data to load // For example, if you have reached the end of the list // Uncomment the following line if needed: // if (noMoreData) { = true; } // Complete the infinite scroll operation if (event) {; } } }
  1. Customize the loadData function to fetch data from your API or source and append it to the existing listItems array. Make sure to call to signal the completion of the refresh or infinite scroll operation.

With these steps, your Ionic app should now have both ion-refresher and ion-infinite-scroll working together. Users can pull down to refresh the list, and when they reach the bottom of the list, more data will be loaded dynamically as they scroll down.

Remember to replace the example data and functions with your actual data source and logic. Also, handle error cases and loading indicators appropriately based on your specific use case.

Have questions or queries?
Get in Touch