ionic pagination example

ionic.pagination.ts

import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FuncsHelperService} from '../_core/_services/funcs-helper.service';
import {AuthenticationService} from '../_core/_services/authentication.service';
import {PostsService} from '../_core/_services/posts.service';
import {PostsModel} from '../_core/_models/posts.model';
import {ImagesModel} from '../_core/_models/images.model';
import {IonInfiniteScroll, IonSlides} from '@ionic/angular';
import {SeeLaterService} from '../_core/_services/see-later.service';
import {UsersService} from '../_core/_services/users.service';
import {TagsModel} from '../_core/_models/tags.model';
import {TagsService} from '../_core/_services/tags.service';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.page.html',
  styleUrls: ['./post-list.page.scss'],
})
export class PostListPage implements OnInit {



  postsList  : PostsModel[] = [];


  // initial values to pagination
  totalPages   = 1;  
  page         = 1;
  perPage      = 3;

  loadFinished = true;

  noResults: boolean = false;
  
  constructor(private router: Router,
              private activatedRoute: ActivatedRoute,
              private postsService: PostsService,
              private funcsHelperService: FuncsHelperService
              ) {
  }

  ngOnInit() {

    this.activatedRoute.queryParams.subscribe( queries => {

      this.postsList  = [];
      this.loadFinished = false;
      this.resetPaginate();
      this.requestData();
    });
  }

  // in view whene scroll ends, this function is called to get more results
  doInfinite(infiniteScroll) {
    this.requestData();
    infiniteScroll.target.complete();
  }

  //
  resetPaginate() {
    this.totalPages   = 1;
    this.page         = 1;
    this.loadFinished = false;
    this.noResults    = true;
    this.postsList    = [];
  }

  requestData() {

    setTimeout( () => {
      // while isnt finished
      if ( !this.loadFinished ) {
        this.funcsHelperService.presentLoading("Carregando ...").then();
        this.postsService._getAllFromSection({}, "", "true", this.page.toString(), this.perPage.toString()).subscribe(response => {
          this.funcsHelperService.dismissLoading();

          // handle data
          this.workRequest(response);

        });
      } else {
        console.log("LOAD FINISHED");
      }

    },250);
  }

  workRequest(response) {
    
    if( response.status == "success"  ) {
      
        
      /** HANDLE CONTENT data */
      const postData = response.data;
      postData.forEach(post => {
        this.postsList.push(post);
      });
      this.postsService.sendPostsList(this.postsList);

        // show no results 
        this.noResults = this.postsList.length == 0;


      /** HANDLE PAGINATION INFORMATION paginate */
      const paginateData = response.paginate;
      this.totalPages = parseInt(paginateData.total_pages);
      this.page       = parseInt(paginateData.page) + 1;

      // end loading - means there is no more content to load from server
      if ( this.page > this.totalPages ) {
        this.loadFinished = true;
      }
    } else {
      this.funcsHelperService.presentAlert(response.publc_message).then();
    }

  }

  


}