Angular 12 ElasticSearch – Quick Start – How to add Elasticsearch.js

In this tutorial, we’re gonna look at how to add ElasticSearch to an Angular 12 Project.

Related Posts:
Angular 12 ElasticSearch example – Add Document to Index
Angular 12 ElasticSearch example – Get All Documents in Index
Angular 12 ElasticSearch example – Documents Pagination with Scroll
Angular 12 ElasticSearch example – simple Full Text Search

** Elasticsearch Tutorials **

Install ElasticSearch

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:

   "tagline":"You Know, for Search"

Add ElasticSearch to Angular 12 Project

1. Install the type definition

Run command:
npm install --save-dev @types/elasticsearch

You will see an elasticsearch directory in node_modules folder:


2. Add dependency

Open package.json in your Angular 12 Project, add:

"dependencies": {
	"elasticsearch-browser": "^15.1.1",

Re-install your Angular 12 Project:
npm install

Use ElasticSearch in Angular 12 Project

1. 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'


import { Client } from 'elasticsearch-browser';

  private client: Client;

  private connect() {
    this.client = new Client({
      host: 'http://localhost:9200',
      log: 'trace'

2. Add CORS config

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

3. Ping to test

Write the code below to ping to ElasticSearch:{
  requestTimeout: Infinity,
  body: 'hello JavaSampleApproach!'

Open Browser to check, it should be:

TRACE: 2018-08-13T07:34:46Z
  -> HEAD http://localhost:9200/
  hello ozenero!
  <- 200


1. Generate Service & Component

Run cmd:
- ng g s elasticsearch
- ng g c test-es

=> Project Structure:


=> App Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestEsComponent } from './test-es/test-es.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

2. ElasticSearch Service


import { Injectable } from '@angular/core';
import { Client } from 'elasticsearch-browser';
import * as elasticsearch from 'elasticsearch-browser';

  providedIn: 'root'
export class ElasticsearchService {

  private client: Client;

  constructor() {
    if (!this.client) {

  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 {
      requestTimeout: Infinity,
      body: 'hello ozenero!'

2. Test Component


import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ElasticsearchService } from '../elasticsearch.service';

  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.status = 'OK';
      this.isConnected = true;
    }, error => {
      this.status = 'ERROR';
      this.isConnected = false;
      console.error('Server is down', error);
    }).then(() => {;



<h3 class="col-md-12 text-center">Elasticsearch server status: {{status}}</h3>

4. App Component


import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'ozenero';
  description = 'Angular - Elasticsearch';


<div class="container" style="width: 400px">
	<div style="color: blue; margin-bottom: 20px">

5. Check Result

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


Open Browser Console, we can see:


Source Code


15 thoughts on “Angular 12 ElasticSearch – Quick Start – How to add Elasticsearch.js”

  1. 854127 352312Hello. fantastic job. I did not anticipate this. This really is a impressive story. Thanks! You made certain fine points there. I did a search on the subject matter and located the majority of folks will have exactly the same opinion along with your blog. 166164

  2. I don’t know if it’s just me or if perhaps everyone else encountering problems with your blog. It seems like some of the written text within your content are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This could be a problem with my internet browser because I’ve had this happen previously. Many thanks

  3. When I originally commented I clicked the -Notify me when new surveys are added- checkbox now each time a comment is added I recieve four emails sticking with the same comment. Possibly there is that is you can eliminate me from that service? Thanks!

  4. I really like your website.. pleasant colors & theme. Performed anyone design this website yourself or even did a person hire an attorney to make it work for you personally? Plz act in response since I!|m planning to style and design my personal weblog and also would want to realize wherever you became that from. thanks

  5. Hey there! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Thank you

  6. I simply could not leave your site before suggesting that I actually enjoyed the usual information a person supply for your visitors? Is going to be again continuously in order to inspect new posts

Leave a Reply

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