title: Angular 2 Observable with multiple subscribers
body: <p>I have an angular 2 service that fetch data from an API
  this service has 3 subscribers (defined in Components) each doing something else with the data (different graphs)</p>
  
  <p>I'm noticing that I'm doing three GET requests to the API while what i want to achieve is one request and that the subscribers will share the data
  I've looks into HOT and COLD observable and tried the .share() on the observable but I'm still doing 3 individual calls</p>
  
  <p>Update, adding code</p>
  
  <blockquote>
    <p>Service</p>
  </blockquote>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  
  import {Observable} from 'rxjs/Rx';
  
  // Import RxJs required methods
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  import { StationCompliance } from './model/StationCompliance';
  
  
  @Injectable()
  export class StationComplianceService {
  
    private url = '/api/read/stations';
  
    constructor(private http : Http) {
      console.log('Started Station compliance service');
     }
  
     getStationCompliance() : Observable&lt;StationCompliance []&gt; {
       return this.http.get(this.url)
        .map((res:Response) =&gt; res.json())
        .catch((error:any) =&gt; Observable.throw(error.json().error || 'Server Error'));
     }
  }
  </code></pre>
  
  <blockquote>
    <p>Component 1</p>
  </blockquote>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { CHART_DIRECTIVES } from 'angular2-highcharts';
  
  import { StationComplianceService } from '../station-compliance.service';
  
  
  @Component({
    selector: 'app-up-down-graph',
    templateUrl: './up-down-graph.component.html',
    styleUrls: ['./up-down-graph.component.css']
  })
  export class UpDownGraphComponent implements OnInit {
  
    graphData;
  
    errorMessage: string;
  
    options;
  
    constructor(private stationService : StationComplianceService) { }
  
    ngOnInit() {
      this.getStationTypes();
    }
  
    getStationTypes(){
      this.stationService.getStationCompliance()
        .subscribe(
          graphData =&gt; {
            this.graphData = graphData;
            this.options = {
              chart : {type: 'pie',
                      plotShadow: true
              },
              plotOptions : {
                showInLegend: true
              },
              title : {text: 'Up and Down devices'},
              series: [{
                data: this.processStationType(this.graphData)
              }]
            }
          },
          error =&gt; this.errorMessage = &lt;any&gt;error
        );
    }
  </code></pre>
  
  <p>Other two components are almost the same, they just show other graph</p>