title: How to render an observables arrays length in template Angular 2
body: <p>I have an observable of my created object type 'ICase'. This observable is used to retrieve data from a JSON file using this method. This method is in a service file. </p>
  
  <p>---template-service.ts---</p>
  
  <pre><code> private _caseUrl = 'api/cases.json';
  getCases(): Observable&lt;ICase[]&gt; 
      {    
              return this._http.get(this._caseUrl)
              .map((response: Response) =&gt; &lt;ICase[]&gt; response.json())
              .do(data =&gt; console.log('All: ' + JSON.stringify(data)))
              .catch(this.handleError);     
      }
  </code></pre>
  
  <p>However in the template I want to display the length of my observable array. I have tried using the async pipe and using the .length operator but I can't seem to display this in the dom. </p>
  
  <p>----template.component.ts ----</p>
  
  <pre><code>  ngOnInit(): void
  {
      console.log("---In OnInit---");
      this._templateService.getCases()
      .subscribe(cases =&gt; this.cases = cases, error=&gt; this.errorMessage = &lt;any&gt;error);
       console.log('Num of cases: ' + this._templateService.getCases().map.length);
        //  this.count =  this._templateService.getCases.length;
  
  }
  </code></pre>
  
  <p>As you can see from my html, I can display the observable elements ok, although I have hidden the data for confidentiality reasons. The red circles indicate where I am trying to display the observables length.
  <a href="https://i.stack.imgur.com/6ZkzS.jpg" rel="nofollow noreferrer">Browser Image</a></p>