Angular 4 Firebase Pagination example with AngularFire2 v4

In this tutorial, we’re gonna create a simple Angular 4 App that displays list of data from Firebase Realtime Database with Pagination using AngularFire2.

Related Posts:
How to integrate Firebase with Angular 4
Angular 4 Firebase CRUD operations with AngularFire2 v4

More Practice:
Angular 4 Firebase AutoComplete Search example with AngularFire2 v4
Angular 4 Firebase Filter Data example with AngularFire2 v4

I. Technology

– Angular 4
– AngularFire2 4.0

II. Overview

Assume that we have Firebase Database like this:

We will build an Angular 4 App that can do pagination (N items in one page):

– Create a function that can get [N + 1] items from Firebase Database starting with input key: getListFrom(key)
– The (N + 1)th item will be the first item for Next Page.
– Click Next Button will:
+ add the first item key of current List to Previous Keys Array prevKeys[].
+ get next [N + 1] items starting with the last item key of current List (nextKey).
+ display only N items.
– Click Prev Button will:
+ get [N + 1] items starting with the last Key of prevKeys[].
+ delete the last Key above from prevKeys[].
+ display only N items.

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.


2. Build Angular 4 App that displays list of data items

You can find how to do this in the post:
Angular 4 Firebase CRUD operations with AngularFire2 v4


3. Pagination
3.1 Service with AngularFireDatabase

Basing on the code from previous post, we just need to add a function that returns a List of Items:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';

export class CustomerService {

  private dbPath: string = '/customers';

  customers: FirebaseListObservable = null;

  constructor(private db: AngularFireDatabase) {}

  getCustomers(numberItems, startKey?): FirebaseListObservable {
    this.customers = this.db.list(this.dbPath, {
      query: {
        orderByKey: true,
        startAt: startKey,
        limitToFirst: numberItems + 1
    return this.customers;

numberItems: number of items in list we wanna show on each page.
startKey: where the query starts to get items.
– We limit to first [numberItems + 1] items because we need last item key as the starting point for the next page.

3.2 Component for displaying pagination
import * as ARR from 'lodash';

export class CustomersListComponent implements OnInit {

  customers: any;
  numberItems = 2;
  nextKey: any;
  prevKeys: any[] = [];
  subscription: any;

  constructor(private customerService: CustomerService) {}

  ngOnInit() {
  getCustomersList(key?) {
    if (this.subscription) this.subscription.unsubscribe()
    this.subscription = this.customerService.getCustomers(this.numberItems, key)
                          .subscribe(customers => {
                              this.customers = ARR.slice(customers, 0, this.numberItems)
                              this.nextKey = ARR.get(customers[this.numberItems], '$key')
  onNext() {
  onPrev() {
    const prevKey = ARR.last(this.prevKeys) // get last key
    this.prevKeys = ARR.dropRight(this.prevKeys) // delete last key

The code is self-explained, you can read Overview section above to understand logic behind it.

III. Source Code


2 thoughts on “Angular 4 Firebase Pagination example with AngularFire2 v4”

  1. I have to thank you for the efforts you have put in penning this site.
    I really hope to check out the same high-grade blog posts from you later on as
    well. In truth, your creative writing abilities has encouraged me to
    get my very own site now 😉

Leave a Reply

Your email address will not be published. Required fields are marked *