Angular 8 ElasticSearch Example – Start Guide

– 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

Angular-Elasticsearch-Example

- Github:

Angular-8-Elasticsearch-Example