title: Angular 2 how to make child component wait for async data to be ready
body: <p>I'm passing async data from a parent component to a child component. And the child component needs to know the length of the data in order to do something.</p>
  
  <p>How the problem is that the child component can't use the 'Oninit' hook to do work because the data isn't available at this time. So how do I do this?</p>
  
  <p>The parent component code looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      moduleId: module.id,
      selector: 'parent',
      template: `&lt;div&gt;
                      &lt;child [items]="items | async"&gt;
                  &lt;/div&gt;`
  })
  
  export class Parent implements OnInit {
  
      items: Items[];
  
      constructor(
          private itemService: ItemService,
          private router: Router
      ) { }    
  
      ngOnInit() {
          this.itemService.getItemss()
              .subscribe(
                  items =&gt; this.items = items,
                  error =&gt; this.errorMessage = &lt;any&gt;error
              );
      }
  
  }
  </code></pre>
  
  <p>And the child component looks like:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
      moduleId: module.id,
      selector: 'child',    
      template: `&lt;div&gt;
                      &lt;div *ngFor="let itemChunk of itemChunks"&gt;&lt;/div&gt;
                      content here
                  &lt;/div&gt;`
  })
  export class child implements OnInit{
      @Input() items: Items[];
      itemChunks: Items[][];
  
      ngOnInit() {
          this.itemChunks = this.chunk(this.Items);
      }
  
      chunk(items: Items[]) {
          let result = [];
          for (var i = 0, len = items.length; i &lt; len; i += 6) { // this line causes the problem since 'items' is undefined
              result.push(items.slice(i, i + 6));
          }
          return result;
      }
  }
  </code></pre>
  
  <p>What is the best practice to handle this?</p>