Paginate data with query cursors from Firestore and Angular

Paginate documents

The goal is a infinity scroll component from Firestore with queries. We use ngxs like state management library and ngxs-firestore plugin to integrate firestore with angular easier.

Demo:

Meder - By Carlos Sanchez

sanchezcarlosjr/personal-blog

A extensible Angular enterprise-grade project generator is ngx-rocket. Thus, you save time and focus on what matters. This moment I guess you have a project.

Let’s go to install state management library:

npm i @ngxs/schematics --save-dev
ng add @ngxs/schematics

We install ngxs firestore plugin, too.

npm install --save @ngxs-labs/firestore-plugin

We generate news page and news state:

ng generate module races--route=race --module=app.module
ng generate component races/races --module race.module
ng generate @ngxs/schematics:store --name races --path app/races

Note that we also include dependencies in your app.component and ngxs module.

We create a Ngxs Firestore Pagination Service

We must check SOLID principles, i.e. Ngxs Firestore Pagination should extend Ngxs Firestore without change interface. Thus, We can allow the same behavior for clients.

Using NgxsFirestorePagination

The service connect method takes as arguments the Action that will trigger subscribing to the Firestore query, it added new items to state array. In addition an opts object with to field, to pass the function that returns the Firestore query.

Getting data from Firestore and Fetching

Thanks.