title: Angular: Passing asynchronous data to child
body: <p>In my parent component I query my database for an array of <code>clients</code>:</p>
  
  <pre><code>this.clientService.get("/dashboard?start_date=2017-11-07", this.current_user.auth_token).subscribe(
      data =&gt; {
          this.clients = data
          console.log(data)
          loader.dismiss()
      },
      err =&gt; loader.dismiss()
  )
  </code></pre>
  
  <p>My <code>clientService.get()</code> function is:</p>
  
  <pre><code>get(url, token):Observable&lt;Response&gt; {
    let headers = new Headers();
    headers.append("authentication", token );
    let options = new RequestOptions({ headers: headers });
  
    let final_url = `${this.baseUrl}${url}`
  
    return this.http.get(final_url, options)
      .map(this.extractData)
      .catch(this.handleError)
  }
  </code></pre>
  
  <p>and finally, my view is:</p>
  
  <pre><code>&lt;approval-card *ngFor="let client of clients"
     [client]="client"&gt;
  &lt;/approval-card&gt;
  </code></pre>
  
  <p>In my child I call <code>client.name</code> and get an error because <code>client</code> is not yet defined.</p>
  
  <pre><code>export class ApprovalCardComponent {
    @Input() client: any;
    name: string;
  
    constructor() {
      this.name = this.client.name
    }
  }
  </code></pre>
  
  <p><strong>How do I refactor to account for the asynchronous call to my server?</strong></p>