CODEWITHSUNDEEP
angularionic-framework
Umaiz Khan
Umaiz Khan

Reputation: 1227

Ionic 3 show first 10 array then after scroll 10

I need to know i am fetching data from api. I need to show first 10 array. Then when user scroll then show 10 like this . How can i do this ? 

this.item = this.http.get('https://afaq-manda.com/api/');


this.item.subscribe(data => {
    loading.dismiss();

 this.data = data;
  console.log('my data: ', this.data);
})

This is how i am fetching data. Thanks

Upvotes: 2

Views: 1119

Answers (2)

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

YOU CAN DO IT TWO WAYS

Infinite Scroll Content infinite-scroll-content

The ion-infinite-scroll component has the infinite scroll logic. It requires a child component in order to display content. Ionic uses its ion-infinite-scroll-content component by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. However, the default spinner can be changed and text can be added by setting properties on the ion-infinite-scroll-content component.

IN IONIC VIEW

<ion-content>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list></ion-list>

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

in .ts

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

    @Component({
      selector: 'infinite-scroll-example',
      templateUrl: 'infinite-scroll-example.html',
      styleUrls: ['./infinite-scroll-example.css']
    })
    export class InfiniteScrollExample {
      @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

      constructor() {}

      loadData(event) {
        setTimeout(() => {
          console.log('Done');
          event.target.complete();

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

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

}

Second way

ngx-pagination

Simple Example

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

my.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}

ngx-pagination

Upvotes: 1

Shrutika Patil
Shrutika Patil

Reputation: 565

You can use infinite-scroll for this. HTML:

  <ion-list>
   <ion-item *ngFor="let i of itemsToDisplay">{{i}}</ion-item>
 </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>

Component:

   itemsToDisplay =[];
    ngOnInit()
    {
     this.item = this.http.get('https://afaq-manda.com/api/');
     this.item.subscribe(data => {
      this.data = data;
      for(let i=0; i< 10; i++)
      {
       this.itemsToDisplay.push(this.data[i]);
      }
     })
    }

    doinfinite(){
     let len = this.itemsToDisplay.length;
     for(let i=len ; i< len+10; i++)
     {
       this.itemsToDisplay.push(this.data[i]);
     }
   }

Please refer this: https://ionicframework.com/docs/v3/api/components/infinite-scroll/InfiniteScroll/

Upvotes: 0

Related Questions