Angular 6 ElasticSearch example – Add Document to Index

In this Angular Elasticsearch tutorial, we’re gonna add Document to Index (with Form).

Related Posts:
Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js
– Next: Angular 6 ElasticSearch example – Get All Documents in Index

Way to add Document to Elasticsearch Index

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

Create Index & Check Connection

Use Kibana for creating Elasticsearch Index (gkz_index):

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

Add Document to Index
ElasticSearch Service

We use ElasticSearch Client.create() function that return an Observable:

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

Component to implement

Practice

1. Generate Service & Component

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

=> Project Structure:

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

2. App Module

app.module.ts

3. ElasticSearch Service

elasticsearch.service.ts

4. Add Document Component

add-customer.component.ts

add-customer.component.html

5. App Component

app.component.ts

app.component.html

5. Check Result

Run Angular 6 App, go to http://localhost:4200/:

angular-6-elasticsearch-example-add-document-to-index-add-document
Submit Document and open Browser Console, you can see:

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

Sourcecode

Angular6Elasticsearch-add-Document

By grokonez | August 14, 2018.



Related Posts


1 thought on “Angular 6 ElasticSearch example – Add Document to Index”

Got Something To Say:

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

*