– Tutorial: “Angular 8 ElasticSearch Example – How to add Elasticsearch.js”
In this tutorial, I guide how to add ElasticSearch to an Angular 8 Project.
Install ElasticSearch – Angular 8 ElasticSearch – How to add Elasticsearch.js
Go to ElasticSearch guide – Getting Started » Installation and follow step by step to install ElasticSearch.
Test local install of ElasticSearch
– by command line:
curl -XGET localhost:9200
– or enter http://localhost:9200/
url on your Browser.
The result should be like this:
{
"name":"first_node_test",
"cluster_name":"elasticsearch",
"cluster_uuid":"E8eoz-uWT0Gxi-ygUIB10Q",
"version":{
"number":"6.3.2",
"build_flavor":"unknown",
"build_type":"unknown",
"build_hash":"053779d",
"build_date":"2018-07-20T05:20:23.451332Z",
"build_snapshot":false,
"lucene_version":"7.3.1",
"minimum_wire_compatibility_version":"5.6.0",
"minimum_index_compatibility_version":"5.0.0"
},
"tagline":"You Know, for Search"
}
Install the type definition
Run command:
npm install --save-dev @types/elasticsearch
You will see an elasticsearch directory in node_modules folder:

Angular Add ElasticSearch Dependency
Open package.json in your Angular 8 Project, add:
...
"dependencies": {
"elasticsearch-browser": "^15.1.1",
...
},
...
Re-install your Angular 8 Project:
npm install
Use ElasticSearch in Angular 8 Project
– Import and use:
import * as elasticsearch from 'elasticsearch-browser';
//...
private client: elasticsearch.Client
private connect() {
this.client = new elasticsearch.Client({
host: 'localhost:9200',
log: 'trace'
});
}
or:
import { Client } from 'elasticsearch-browser';
//...
private client: Client;
private connect() {
this.client = new Client({
host: 'http://localhost:9200',
log: 'trace'
});
}
Add CORS config to Angular 8 Project
To work with ElasticSearch, we need to enable CORS by adding in /config/elasticsearch.yml:
http.cors.enabled : true
http.cors.allow-origin : "*"
http.cors.allow-methods : OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type, Content-Length
Angular 8 Ping to ElasticSearch
Write the code below to ping to ElasticSearch:
this.client.ping({
requestTimeout: Infinity,
body: 'hello JavaSampleApproach!'
});
Open Browser to check, it should be:
TRACE: 2018-08-13T07:34:46Z
-> HEAD http://localhost:9200/
hello loizenjava!
<- 200
Now it's time to practice!!!
Generate Angular Service & Component
Run cmd:
- ng g s elasticsearch
- ng g c test-es
Project Structure:

App Module:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestEsComponent } from './test-es/test-es.component';
@NgModule({
declarations: [
AppComponent,
TestEsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 8 ElasticSearch Service
elasticsearch.service.ts
import { Injectable } from '@angular/core';
import { Client } from 'elasticsearch-browser';
import * as elasticsearch from 'elasticsearch-browser';
@Injectable({
providedIn: 'root'
})
export class ElasticsearchService {
private client: Client;
constructor() {
if (!this.client) {
this._connect();
}
}
private connect() {
this.client = new Client({
host: 'http://localhost:9200',
log: 'trace'
});
}
private _connect() {
this.client = new elasticsearch.Client({
host: 'localhost:9200',
log: 'trace'
});
}
isAvailable(): any {
return this.client.ping({
requestTimeout: Infinity,
body: 'hello ozenero!'
});
}
}
Angular 8 Test Component
test-es.component.ts:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ElasticsearchService } from '../elasticsearch.service';
@Component({
selector: 'app-test-es',
templateUrl: './test-es.component.html',
styleUrls: ['./test-es.component.css']
})
export class TestEsComponent implements OnInit {
isConnected = false;
status: string;
constructor(private es: ElasticsearchService, private cd: ChangeDetectorRef) {
this.isConnected = false;
}
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();
});
}
}
test-es.component.html:
<h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3>
</pre>
<h5>4. App Component</h5>
<em>app.component.ts</em>
<pre class="lang:java" >
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ozenero';
description = 'Angular - Elasticsearch';
}
- app.component.html:
<div class="container" style="width: 400px">
<div style="color: blue; margin-bottom: 20px">
<h1>{{title}}</h1>
<h3>{{description}}</h3>
</div>
<app-test-es></app-test-es>
</div>
Check Result
Run Angular 8 App, go to http://localhost:4200/
:

Open Browser Console, we can see:

Read More
Source Code
- Github: