prevent child component render before my parent controller resolves the data

My situation

I have an app.module, with bootstrap app.component

and the router base href = '/'

which loads my home.component

where I have method onInit() where I getting my data from the API using RiotService

this.riot.Summoner.byName(this.summoner, this.region);

so I can do like

this.riot.Summoner.byName(this.summoner, this.region).then(()=> {
//do something with data
//this.riot.Summoner.info
});

Next step##


I have my summoner.component and it has its own route '/summonerName/etc' where I need to use data retrieved from parent component (home.component)

Its okay when I go first to '/', then to '/summonerName/etc' using [routerLink] for example

but when I go directly to '/summonerName/etc' or refresh the page

my home.component starts to retrieve data from my RiotServive and when I try to get this.riot.Summoner.info I get undefined when my summoner.component got rendered.

I know its all because of my promise resolving a bit longer than child component rendering.

How can I prevent my child component render before my parent controller resolves the data?

Here is my RiotService

request<T>(url:string, errorHandler?: (error: any) => Promise<any>){
return this.http.get(url)
.toPromise()
.then(response => response.json() as T)
.catch(errorHandler || this.handleError);
}
byName(summonerName:string, region:string){
return this.request<ISummoner>(
`some url to get data`)
.then((response) => {
this.info = response as ISummoner
})
}

Continue reading...