Oleg-Sulzhenko
1/28/2019 - 5:46 PM

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