title: How to pass async data from service to component in Angular2
body: <p>I'm using services to get some image URLs using API. When I want to pass this data to other components, I can not do it because passing processing doesn't wait to async data. What should I use to pass this bikeImgs array properly?</p>
  <p>This is my service component. I'm pushing respectively the image URLs from API.</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class ItemService {
  
    bikeImgs :string[] = [];
  
    constructor(private http: HttpClient) {
      this.http
        .get(
          &quot;https://api.unsplash.com/collections/iuAONw1hf3k/photos/?query=''&amp;per_page=20&amp;client_id=wjJ9ECR9hrNPSx6HMZADgO7D0lWw_kXHPHfyyMMxy2Y&amp;page=1&quot;
        )
        .subscribe((data: any) =&gt; {
          data.map((e: any) =&gt; {
            this.bikeImgs.push(e.urls.small);
          });
        });
     }
  
  }
  
  </code></pre>
  <p>This is my component which I want to get the data and see in the console.log</p>
  <pre><code>import { Component, OnChanges, OnInit } from '@angular/core';
  import { ItemService } from './item.service';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent implements OnInit {
    bikeImgs: string[] = [];
  
    constructor(private itemService: ItemService) {
    }
  
    ngOnInit() {
      this.bikeImgs = this.itemService.bikeImgs;
      console.log(&quot;here &quot; +this.bikeImgs);
    }
  }
  
  </code></pre>
  <p>And here is stackblitz project which I created from the above code.</p>
  <p><a href="https://stackblitz.com/edit/angular-http-client-first-example-haxfcp" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-http-client-first-example-haxfcp</a>?</p>