Example: Pagination Service

pagination.service.ts

import { Injectable, EventEmitter } from '@angular/core';


@Injectable({
  providedIn: 'root'
})
export class PaginationService {


  resultsChanged: EventEmitter<any> = new EventEmitter();


  constructor() { }


  applyPaging(source: any[], pageSize: number = 10, page: number = 1) {
    let pagedResult = {
      items: source,
      page: page,
      pageSize: pageSize,
      pageItemStart: 0,
      pageItemEnd: 0
    };


    // Break out early if the source data is not an Array or if it is empty
    if (!(Array.isArray(source) && source.length)) {
      pagedResult.page = 1;
      return pagedResult;
    }


    // Determine, based on the item count and pageSize, if the requested page number is realistic. If not, adjust it down to maxPageSize.
    const maxPageSize = source.length > pageSize ? Math.ceil(source.length / pageSize) : 1;
    page = page > maxPageSize ? maxPageSize : page;


    // Determine which items in source fall in the requested range
    if (page > 0 && pageSize > 0 && source.length > pageSize) {
      let pagedCollection = source.slice(((page - 1) * pageSize), ((page - 1) * pageSize + pageSize));
      pagedResult.items = pagedCollection;
    }


    // Determine the start and end item index (1-based)
    if (source.length > pageSize) {
      pagedResult.pageItemStart = (pagedResult.page * pagedResult.pageSize) - (pagedResult.pageSize - 1);
      pagedResult.pageItemEnd = ((pagedResult.page - 1) * pagedResult.pageSize) + pagedResult.items.length;
    } else {
      pagedResult.pageItemStart = 1;
      pagedResult.pageItemEnd = pagedResult.items.length;
    }


    return pagedResult;
  }
}