There are a series of components that will reveal themselves after running a custom method viewChildRef.show() on them (I'm using a @ViewChild reference).
The problem is that the state gets updated with a @Select decorator (angular-redux/store) initially before the child component is ready - the callback in the subscription needs to be called after ngAfterViewChecked has triggered.
What is best practice to delay a call to a child component until a specific hook occurs? For those that don't know angular-redux/store, I have a rxjs subscription to play with from the @select decorator. Maybe a delay/debounce set up would work?
I can and have already set a variable readyForShow that is set to true, and then again false once ngAfterViewChecked is called. This is a tedious solution - there must be a better way, and this must be common in the angular-redux world.
My goal is to have something easily and quickly applied when I need to do this elsewhere as well.
Additionally, if there is a ready made solution in ngrx feel free to mention this - it will cause me to consider switching libraries and may help others!
Seems to me, just about every 'real' page will fetch data asynchronously, so I just hook up the template to the observable with the async pipe, let the literal parts display and the async data fill in when it arrives, e.g
Note the construct - observable and pipe are bracketed, outside the bracket you have the unwrapped object. The Elvis/Safe navigation operator
?which stops evaluation of the property when the object is null.If the page doesn't look right without data, you can hide it with ngIf or ngShow
Also, with Redux stores the shape of the default/initial store can be important, e.g for an object initialize to {} instead of null, for an array initialize to [] - something that downstream code won't crash on too easily.