0

I'm developing an application using Angular 6 and I'm looking for some help/guidance on this. Below is my app component.

app.component.html

--header--

-- router outlet--

--footer--

And I'm invoking two observable http services to get the data in ngOnInit of app.component and storing the value in browser sesionStorage. The two invocations are happening one within another. And I'm trying to read the sessionStorage object in my child component's ngOnInit but the invocation is not happening the way I expected.

Expected:

-- app component - ngOnInit -- Service 1 Invocation --

-- app component - ngOnInit -- Service 2 Invocation --

-- app component - ngOnInit -- Store result into sessionStorage --

-- Child Component - ngOnInit - read object from sessionStorage--

Actual:

-- app component - ngOnInit -- Service 1 Invocation --

-- Child Component - ngOnInit - read object from sessionStorage--

-- app component - ngOnInit -- Service 2 Invocation --

-- app component - ngOnInit -- Store result into sessionStorage --

As the child component is not able to read the object from sessionStorage, it fails. And I'm trying to understand what am I missing here?

TIA

S.Siva
  • 1,901
  • 4
  • 17
  • 22
  • Your observables run async, so you have to wait for. Lear about higher order maps in rxjs. – kjppster Oct 16 '19 at 14:28
  • The behaviour shows, that the child component has been initalized, before service 2 invocation is complete. ngOnInit gets fired as soon as the component has been placed in html. The simplest way to go about is, to wrap child component in a container and hide it with boolean and ngIf, once you have stored in sessionStorage, set the boolean to true. Do you want to see some code if the above explanation was not easy? – Zonaib Oct 16 '19 at 14:32
  • Take a look at [this](https://stackoverflow.com/a/42716265/2148050) – Zonaib Oct 16 '19 at 14:36

0 Answers0