Angular 2 how to make child component wait for async data to be ready

There are three ways to do this:

1. Put an *ngIf in parent. Only render child when parent’s items is ready.

<div *ngIf="items">
   <child [items]="items | async">
</div>

2. Separate your input getter setter in child. Then act whenever the value is set, you can use RxJS BehaviorSubject also.

private _items = new BehaviorSubject<Items[]>([]);

@Input() set items(value: Items[]) { 
    this._items.next(value); 
}

get items() {
   return this._items.getValue();
}

ngOnInit() {
    this._items.subscribe(x => {
       this.chunk(x);
    })
}

3. Do it during the ngOnChanges of the child. Refer to here for example. https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges