In this tutorial, we’re gonna look at way to create an Elasticsearch Index in an Angular 4 Project.
Related Posts:
– Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js
– Angular 4 ElasticSearch example – Add Document to 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
Contents
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 an ElasticSearch Index
2.1 Connect to ElasticSearch
|
1 2 3 4 5 6 7 8 9 10 |
import { Client } from 'elasticsearch'; // ... private client: Client; private connect() { this.client = new Client({ host: 'http://localhost:9200', log: 'trace' }); } |
2.2 Ping ElasticSearch
|
1 2 3 4 |
this.client.ping({ requestTimeout: Infinity, body: 'hello JavaSampleApproach!' }); |
If server is available, your Browser console shows:
|
1 2 3 4 |
TRACE: 2017-10-13T08:55:32Z -> HEAD http://localhost:9200/ hello JavaSampleApproach! <- 200 |
Now you can create an Index.
2.3 Create an ElasticSearch Index
|
1 2 3 4 5 6 7 8 9 |
this.client.indices.create({ index: 'index_name' }).then( result => { console.log(result); alert('Index added, see log for more info'); }, error => { alert('Something went wrong, see log for more info'); console.error(error); } ); |
II. Practice
Project Structure:
1. App Module
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {AppComponent} from './app.component'; import {TestEsComponent} from './test-es/test-es.component'; import {ElasticsearchService} from './elasticsearch.service'; @NgModule({ declarations: [ AppComponent, TestEsComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [ElasticsearchService], bootstrap: [AppComponent] }) export class AppModule {} |
2. ElasticSearch Service
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { Injectable } from '@angular/core'; import { Client } from 'elasticsearch'; @Injectable() export class ElasticsearchService { private client: Client; constructor() { if (!this.client) { this.connect(); } } private connect() { this.client = new Client({ host: 'http://localhost:9200', log: 'trace' }); } createIndex(name): any { return this.client.indices.create(name); } isAvailable(): any { return this.client.ping({ requestTimeout: Infinity, body: 'hello JavaSampleApproach!' }); } } |
3. Add Test Component
test-es.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { ElasticsearchService } from '../elasticsearch.service'; @Component({ selector: 'test-es', templateUrl: './test-es.component.html', styleUrls: ['./test-es.component.css'] }) export class TestEsComponent implements OnInit { isConnected = false; form: FormGroup; status: string; constructor(private fbuilder: FormBuilder, private es: ElasticsearchService, private cd: ChangeDetectorRef) { this.isConnected = false; this.form = fbuilder.group({ index: '', }); } ngOnInit() { this.es.isAvailable().then(() => { this.status = 'OK'; this.isConnected = true; }, error => { this.status = 'ERROR'; this.isConnected = false; console.error('Server is down', error); }).then(() => { this.cd.detectChanges(); }); } onSubmit(value) { this.es.createIndex({ index: value.index }).then( result => { console.log(result); alert('Index added, see log for more info'); }, error => { alert('Something went wrong, see log for more info'); console.error(error); } ); } } |
test-es.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="row"> <h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3> </div> <div class="col-md-6 col-md-offset-3"> <div class="row"> <h4 class="col-md-12 text-center">Post index</h4> </div> <div class="row"> <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> <div class="form-group"> <label class="control-label" for="index">Index</label> <input type="text" class="form-control" id="index" formControlName="index" name="index"> </div> <button type="submit" [disabled]="!isConnected" class="btn btn-primary pull-right">Submit</button> </form> </div> </div> |
4. App Component
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'JavaSampleApproach'; description = 'Angular4-SpringBoot Demo'; } |
app.component.html
|
1 2 3 4 5 6 7 8 |
<div class="container" style="width: 400px"> <div style="color: blue; margin-bottom: 20px"> <h1>{{title}}</h1> <h3>{{description}}</h3> </div> <test-es></test-es> </div> |
5. Check Result
Run Angular 4 App, go to http://localhost:4200/:
Open Browser Console, we can see:
Fill index in the box (for example: jsa_index) and press Submit button, we can see:
– in Browser Console:
– in ElasticSearch Console:
III. Sourcecode
Angular4ElasticSearch-createIndex
Last updated on August 14, 2018.