Angular 6 ElasticSearch example – Documents Pagination with Scroll

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

Next: Angular 6 ElasticSearch example – simple Full Text Search

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

Elasticsearch Documents Pagination with Scroll

Add ElasticSearch to Angular 6 Project

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

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

Add Document & Get All Documents in Index

– Add Document:
>> Please visit Angular 6 ElasticSearch example – Add Document to Index.

angular-6-elasticsearch-example-add-document-to-index-add-document

– Get All Documents:
>> Please visit Angular 6 ElasticSearch example – Get All Documents in Index.

angular-6-elasticsearch-example-show-documents-in-index-result

Get All Documents in Index with Scroll
Search with Scroll Param

In the Client.search() function, 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.

Scroll to next page

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

Practice

0. Overview

Goal:

angular-6-elasticsearch-example-pagination-result

>> Click Next button for next page.

1. Generate Service & Components

Run cmd:
ng g s elasticsearch
ng g c customer/add-customer
ng g c customer/customer-details
ng g c customer/show-customers

=> Project Structure:

angular-6-elasticsearch-example-pagination-scroll-project-structure.png

2. App Module

app.module.ts

3. ElasticSearch Service

elasticsearch.service.ts

4. Components

customer/customer.interface.ts

4.1 Add Document Component

Please visit: 4_Add_Document_Component (in the previous post) for details.

4.2 Details Component

customer-details.component.ts

customer-details.component.html

4.3 Show Documents Component

show-customers.component.ts

show-customers.component.html

5. App Routing Module

app-routing.module.ts

6. App Component

app.component.ts

app.component.html

7. Check Result

Run Angular 6 App, go to http://localhost:4200/, add Customer Data, then choose Customers tab:

angular-6-elasticsearch-example-pagination-result

Click Next button several times to view more documents:

angular-6-elasticsearch-example-pagination-result-new-page

Open Browser Console, you can see:

When there is no more document:

Sourcecode

Angular6Elasticsearch-pagination-scroll

By grokonez | August 16, 2018.



Related Posts


Got Something To Say:

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

*