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

Question

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.

How the

Answer 1

There are three ways to do this:

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

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([]);

@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