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:
angular-4-firebase-pagination-db

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

– 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.

angular-4-firebase-integration-copy-firebase-project-config

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

angular-4-firebase-crud-goal

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';

@Injectable()
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() {
    this.getCustomersList();
  }
  
  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() {
    this.prevKeys.push(ARR.first(this.customers)['$key'])
    this.getCustomersList(this.nextKey)
  }
  
  onPrev() {
    const prevKey = ARR.last(this.prevKeys) // get last key
    this.prevKeys = ARR.dropRight(this.prevKeys) // delete last key
    
    this.getCustomersList(prevKey)
  }
}

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

III. Source Code

Angular4Firebase-Pagination



By grokonez | September 4, 2017.

Last updated on November 29, 2018.



Related Posts


Got Something To Say:

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

*