Angular 4 ElasticSearch example – Add Document to Index

In the post, we had known how to create an Index. This tutorial shows you way to add Document to Index (with Form).

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 – Get All Documents in Index
Angular 4 ElasticSearch example – Documents Pagination with Scroll

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. Add Document to Index
3.1 ElasticSearch Service

We use ElasticSearch Client.create() function that return a Promise:

The params should have at least index, type, id to make it work.

3.2 Component to implement

II. Practice

Project Structure:
angular-4-elasticsearch-add-document-structure

1. App Module

2. ElasticSearch Service

3. Add Document Component

add-customer.component.ts

add-customer.component.html

4. App Component

app.component.ts

app.component.html

5. Check Result

Run Angular 4 App, go to http://localhost:4200/:
angular-4-elasticsearch-add-document-result

Submit Document and open Browser Console, you can see:
angular-4-elasticsearch-add-document-result-console

III. Sourcecode

Angular4ElasticSearch-addDocument

By JavaSampleApproach | October 15, 2017.

Related Posts


Got Something To Say:

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

*