title: Angular 2 Service Data Binding
body: <p>When my app first launches I want the <code>player.service</code> to make an HTTP request and save the data as a variable in my service for my component(s) to access. My service makes the request just fine and the data does save, but my view never updates.</p>
  
  <p>In my <code>playerlist.component</code> I inject the service to have access to the variable but I can't get the data. I imagine it's because I need to do all this observable stuff to make it happen.</p>
  
  <p>All I want is my list in my view to populate when the page loads and have and make sure all my future components have access to a single source of data to prevent multiple http requests.</p>
  
  <p>In my <code>app.component</code> I did include <code>player.service</code> and put it in the providers...if that matters.</p>
  
  <p><strong>player.service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/Rx';
  
  @Injectable()
  export class PlayerListService {
  
      public playerListData;
  
      constructor(private http:Http) {
          this.getPlayerData().subscribe(
              data =&gt; this.playerListData = data
          );
      }
  
      getPlayerData = ():Observable&lt;any&gt; =&gt; {
        return this.http.get('my-api').map(response =&gt; response.json())
      }
  }
  </code></pre>
  
  <p><strong>playerlist-component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { PlayerListService } from '../shared/index';
  
  @Component({
      selector: 'app-player-list',
      templateUrl: './player-list.component.html',
      styleUrls: ['./player-list.component.scss']
  })
  export class PlayerListComponent implements OnInit {
  
      public playerList;
  
      constructor(private playerListService:PlayerListService) {}
  
      ngOnInit() {
          this.playerList = this.playerListService.playerListData;
      }
  }
  </code></pre>