title: Angular 2 / 4 - How to know if API is Online?
body: <p>I have a NodeJS Express API with this route <a href="http://localhost:4040/online" rel="nofollow noreferrer">http://localhost:4040/online</a></p>
  
  <p>returning :</p>
  
  <pre><code>{
    "status": "true"
  }
  </code></pre>
  
  <p>if my API is online.</p>
  
  <p>In my Angular 2 (4) application, I want to know in real time if my API is Online true or Online False.</p>
  
  <p>I try many things but I cant get the status in real time, I need do call some service method. Is there a way to do that ?</p>
  
  <h1>UPDATE</h1>
  
  <p>This is my new code <a href="https://gist.github.com/duard/05283f1625c807f50ebc5cfb289e7ae4" rel="nofollow noreferrer">https://gist.github.com/duard/05283f1625c807f50ebc5cfb289e7ae4</a></p>
  
  <p>It works, but I see in my console it trying to check the URL every 5 seconds ... I'm not happy yet :-(
  <a href="https://i.stack.imgur.com/1AffN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1AffN.png" alt="enter image description here"></a></p>
  
  <h1>OLD CODE</h1>
  
  <p><strong>My Application</strong> </p>
  
  <pre><code>export class AppComponent {
    title = 'app works!';
    data: any[];
  
    constructor(private http: Http, private apiService: ApiService) {
      this.apiService.getData().subscribe(
        data =&gt; {
        this.data = data;
      }, 
      error =&gt; { 
        this.data = [{status: "false"}] ;
      });
    }
  }
  </code></pre>
  
  <p><strong>My service</strong></p>
  
  <pre><code>export class ApiService {
  
    private url: string = `http://localhost:4040/online`;
  
    private data: any[];
    private observable: Observable&lt;any&gt;;
  
    constructor(private http: Http) { }
  
    getData() {
      console.log('getData called');
      if (this.data) {
        console.log('data already available');
        // if `data` is available just return it as `Observable`
        console.log(' =&gt;  ' + ' pegou cache');
        return Observable.of(this.data);
      } else if (this.observable) {
        console.log('request pending');
        // if `this.observable` is set then the request is in progress
        // return the `Observable` for the ongoing request
        return this.observable;
      } else {
        console.log('send new request');
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        // create the request, store the `Observable` for subsequent subscribers
        this.observable = this.http.get(this.url, {
          headers: headers
        })
          .map(response =&gt; {
            console.log('response arrived');
            // when the cached data is available we don't need the `Observable` reference anymore
            this.observable = null;
  
            if (response.status == 400) {
              return "FAILURE";
            } else if (response.status == 200) {
              this.data = response.json();
              return this.data;
            }
            // make it shared so more than one subscriber can get the result
          })
          .share();
        return this.observable;
      }
    }
  }
  </code></pre>
  
  <p><strong>My Template</strong></p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
  &lt;/h1&gt;
  &lt;hr&gt;
  &lt;h3&gt;capitol&lt;/h3&gt;
  {{ capitol | json}}
  &lt;h3&gt;data&lt;/h3&gt;
  {{ data | json}}
  {{ (data | async) | json}}
  &lt;hr&gt;
  </code></pre>
  
  <p>If I use this ASYNC I get errors.</p>