AngularFire2 + FireStore | Pagination with Next & Previous in Tabular Form Example

FireStore is a Firebase service which provides NoSQL Cloud Database solutions. We can easily use Firebase SDK’s to use a number of services on Android, IOS and even on We Application.

In this tutorial, we will learn how to integrate FireStore service in Angular 8 application and how to store data in the FireStore cloud database using Firebase JavaScript SDK. For Angular, we will use Firebase’s official package to use its services in Angular project known as AngularFire2.

Our tutorial example Application will have a form to submit values in FireStore and a Table to list items from the database. We will implement FireStore Query methods to load data in chunks from database using limit, there will be two buttons to load Next and Previous set of records.

Pagination is used to load limited number rows from database which not only facilitates user by not dumping all data by also proves economical in terms of quota limit to read and write in the database.

Let’s get started!

We will create a new Angular application in latest version 8 but this tutorial is compatible with the previous version as well.

Create a new project

Run following NPM command to quickly create a new Angular app using Ng CLI tool

Install AngularFire2

To use Firebase services in the project we will install Firebase’s official library AngularFire2.

Run following NPM command to install:

How to create a Firebase Project and get credential?

For adding we need Firebase account and a project. If you already have one just skip this part.

Step 1) Sign in Firebase with your Google account then click on “Get started”

Step 2) Click on “+ Add project”, enter a name for your project then hit “Continue”

Step 3) After that it will ask to add Analytics, for now, you can skip it then hit “Create Project”

Step 4) Get project credentials. Click on Web icon looks like this </> and provide you app details, after that copy the credential for your app which we will use in our Angular project.

Looks like this:

Step 5) Final step is to enable Database service in the project. Click on “Database” on the left sidebar. Click on “Create database” as we are going to use this service also known as FireStore.

Make sure to select “Start in test mode” as we are not adding any authentication, but in production, you should handle them.

Integrate Firebase in Angular project

We need to update the Angular project’s environment file with Firebase credentials which we got after following Step 4.

Open “~environments/environment.ts” file and update it with below code:

Update app’s module file to initialize the AngularFire with the above credentials.

Open the app.module.ts file and import  AngularFireModule (Required module) and AngularFirestoreModule (Module to use database services)

Replace below code in the file:

FormsModule is required for submitting values using form.

Use Firestore in Component

To use the Firestore database in component, we will import AngularFirestore class to use its methods for database operations.

Also, add it in the component’s class constructor.

How data is stored in FireStore?

FireStore is a NoSQL cloud database where data is stored in the form of Collections and Documents. Each Collection act like a table like we have in the Relational Database Mangement System(RDMS) and have Documents in each Collection like table rows.

For example, we will create a Collection “People” that will have each Document with key-value pair of Id, Name, Place, Timestamp 

How to Add a new Document in a Collection?

To add a new document or item in a Collection we use add method as shown below:

here we added a new Document in People Collection using the add method which returns a promise.

Create a Form and Table to communicate FireStore

For a demonstration of data communication with FireStore, we will create a Form with two Input Fields to take Name and Place value which will be saved in a FireStore collection.

There will be a Table to show a list of items loaded from FireStore using a load method the snapshotChanges() method. This method is an Observable method which works in realtime and returns the Data payload as soon there is a change in Collection.

Here we used to limit and orderBy methods to return only 5 records from Database, ordered by timestamp key in descending order. You can check more details about using Queries here.

Next and Previous Pagination on Data Collections

We will use some of the methods of FireStore to add Next and Previous functionalities on data retuned from Database. For that, we will use the following methods.

startAt(): This method will start looking at documents after a given document.
endBefore(): List documents only before specified document.
startAfter(): This method will be used to list items after a specified document.

Update Component Template and Class

In App component template file we will add a Form and a Table to add and list data with next and previous buttons.

Update the app.component.html file with following template HTML code:

For styling here, we used Bootstrap classes. Also, add bootstrap.css file in index.html file’s head section.

In the App’s component class, we have the following methods:

loadItems(): This method will load items on Component initialization and also updated snapshot of items as soon they are updated in FireStore.
addItem(): Add new item in FireStore collection.
nextPage(): Load next set of items.
prevPage(): Load a previous set of items.
To handle the previous set we have used startAt and endBefore methods. In endBefore we take the last document of items so that items will be before from current.
But there is tweak we need to use by saving the previous first document in an array prev_first_doc
Why we are doing this?
Suppose we have items with value1 to 20. Page 1 will have 1-5, then next 6-10,10-15,15-20 Right?
But in the case to get previous 5 we call endBefore where we pass the last document of current 5. so if we show 10-15 where last is 15, endBefore will fetch 1-15 and limit(5) will return only 1-5. That will always return 1-5.
So to resolve this we are maintaining the first item of the last page to use it in startAt method.
Replace app.component.ts file with below code:

That’s it Now you have FireStore listing with Add new item Form. We used queries to limit data set to 5 records per snapshot. Next and previous pages can be accessed using FireStore methods like endBefore, startAt and startAfter.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of