title: Angular 2: Binding Data using Elasticsearch Client
body: <p>I'm trying to write a simple web interface for Elasticsearch using Angular 2 and the official <a href="https://www.npmjs.com/package/elasticsearch" rel="nofollow noreferrer">elasticsearch.js</a> client from npm.</p>
  
  <p>I've created a service like this:</p>
  
  <pre><code>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://my-elasticsearch-host:9200',
              log: 'trace'
          });
      };
      isAvailable(): PromiseLike&lt;String&gt; {
          return this._client.ping({
              requestTimeout: Infinity
          });
      }
  }
  </code></pre>
  
  <p>This seems to work fine. Logging shows me that requests are answered correctly.</p>
  
  <p>Here's my component:</p>
  
  <pre><code>import { OnInit, Component } from '@angular/core';
  import { ElasticsearchService } from './services/elasticsearch.service';
  
  @Component({
      selector: 'foo',
      templateUrl: './foo.component.html',
      providers: [ElasticsearchService]
  })
  export class TimeLineComponent implements OnInit {
  
      private status: String = 'not ok';
      constructor(private esService: ElasticsearchService) { } ;
  
      ngOnInit(): void {
          this.showStatus();
      }
  
      showStatus(): void {
          this.esService.isAvailable()
              .then( response =&gt; this.status = 'OK' );
      }
  
  }
  </code></pre>
  
  <p>and here's the template:</p>
  
  <pre><code>status:{{status}}
  </code></pre>
  
  <p>I don't understand why my browser keeps showing "not ok". What am I missing here?</p>