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:

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

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

III. Source Code


Related Posts

Got Something To Say:

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