Angular 4 ElasticSearch example – Documents Pagination with Scroll

In the post, we had known how to get All Documents in Index. This tutorial shows you way to do pagination with scroll function.

Related Post:
Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js
Angular 4 ElasticSearch example – How to create an Index
Angular 4 ElasticSearch example – Add Document to Index
Angular 4 ElasticSearch example – Get All Documents in Index

Elasticsearch Tutorials:
Elasticsearch Overview
ElasticSearch Filter vs Query
ElasticSearch Full Text Queries – Basic

I. How to

1. Add ElasticSearch to Angular 4 Project

Please visit Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js for details.

With the post, you will know how to:
– Install ElasticSearch
– Add ElasticSearch to Angular 4 Project
– Use it in the project

2. Create Index & Check Connection

Please visit Angular 4 ElasticSearch example – How to create an Index for details.

3. Get All Documents in Index with Scroll
3.1 Search with Scroll Param

In the Client.search() fucntion, we add a SearchParam: scroll, set size for number of items per page and sort by id:

Assume that _size is 3, the response of search() function should be like:

We will use _scroll_id to get documents in next page.

3.2 Scroll to next page

The response of search() function will contain next 3 (or less than 3) documents and should be like:

II. Practice

0. Overview

Goal:
angular-4-elasticsearch-pagination-scroll-overview

Project Structure:
angular-4-elasticsearch-get-all-documents-structure

1. App Module

2. ElasticSearch Service

3. Components
3.1 Add Document Component

Please visit: 3_Add_Document_Component for details.

3.2 Details Component

You can find it at: 3.2_Details_Component (in the previous post).

3.3 Show Documents Component

customer.interface.ts

show-customers.component.ts

show-customers.component.html

4. App Routing Module

5. App Component

app.component.ts

app.component.html

6. Check Result

Run Angular 4 App, go to http://localhost:4200/, add Customer Data, then choose Customers tab:
angular-4-elasticsearch-pagination-scroll-overview

Click Next button several times to view more documents:
angular-4-elasticsearch-pagination-scroll-result-next

Open Browser Console, you can see:

When there is no more document:

III. Sourcecode

Angular4ElasticSearch-pagination-scroll

By JavaSampleApproach | October 16, 2017.


Related Posts


Got Something To Say:

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

*