title: Sharing data between components using service retrieved from an API server
body: <p>I am getting data from an API server which I use on multiple components. However, if I try to share the data using a service, the components process before the data is retrieved. </p>
  
  <p>I can retrieve the data in each of the components, but then the user must wait for the data to be retrieve before loading each page (component).  The data doesn't change, so I would like to be able to http.get() the data once and manipulate the views in the various components. </p>
  
  <p>I can also pass the data from parent to child - but, since their are multiple pages, sharing the data via the router and @Input() doesn't work. </p>
  
  <p>NOW, I am trying to use a shared service. The service eventually returns the data, but the pages attempt to load before the data is retrieved which means no data is displayed. </p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div class="router-body"&gt;
        &lt;router-outlet &gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>api.service</p>
  
  <pre><code>createData(url): Observable&lt;any&gt; {
      this.http.get&lt;Person[]&gt;(url)
          .subscribe(people =&gt; {
            console.log("in createData()");
            this.people = people;
  
          });
          return of(this.people);
    }
  </code></pre>
  
  <p>people.component</p>
  
  <pre><code>  ngOnInit() {
      this.apiService.createData(this.apiService.personURL)
      .subscribe( people =&gt; { 
          console.log("data within people.component");
          console.log(this.people);
          this.people = people });
    }
  </code></pre>
  
  <p>people.component is getting 'undefined' for this.people
  api.service returns the data eventually, but the people page never displays it. </p>
  
  <p>I need a way to 
  1 - pull the data ONCE
  2 - display the data on the people page (or other pages)</p>