Angular doesn't write the value after updating sessionStorage

Question

My code is pretty simple, I have this html in my component

<h2>{{username}}</h2>
<h2>{{sessionId}}</h2>

An this is the script I use to update those variables

    //i check for when the router redirects to the /user component
    router.events.pipe(
      filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
    ).subscribe(() => {
      //router event happens
      if (location.path() == "/user") {
        //I do a call to the backend to get the user info I need
        let userTemp = <string>sessionStorage.getItem("username");
        const params = new HttpParams()
          .set('username', userTemp);
        //the call happens in the service calss that I inject
        this.service.getUserInfo(params);
        //all it does is getting the data and sessionStorage.setItem() on both values
        this.username = <string>sessionStorage.getItem("username");
        this.sessionId = <string>sessionStorage.getItem("sessionId");
      }
    });

Even tho I set the values first and then get them, only the username variable is shown in the html, the sessionId variable doesn't get drawn between the <h2></h2> tags. This could be because I already have the "username" value in the sessionStorage. Note: both variables are set as 'null' in the class

This is the service:

getUserInfo(params: HttpParams) {
    this.http.get<UserData>('/api/getuserinfo', { params, responseType: 'json' }).subscribe(response => {
      //I set the username again
      sessionStorage.setItem("username", response.username);
      //I add a new value called sessionId
      sessionStorage.setItem("sessionId", response.sessionId);
    });
  }

I tried setting the ngOnInit() function to set the values on initialization and then call this.ngOnInit() after the service call but even if the function gets called. Any varioation on the code has not helped , and I didn't find anything that could explain why the variable update is not seen by Angular, even though from the debugger I can access the value in the sessionStorage object.

Answer 1

Here's how I resolved it without using a promise. I return the http.get in the service like this:

getUserInfo(params: HttpParams) {
return this.http.get<UserData>('/api/getuserinfo', { params, responseType: 'json' })
  .pipe(tap(response => {
    sessionStorage.setItem("username", response.username);
    sessionStorage.setItem("sessionId", response.sessionId);
  }));
}

And subscribe to the service.getUserInfo(params) in the component where I use the service:

this.service.getUserInfo(params).subscribe(() => {
      this.update();
    });

update is a function that just updates the variables:

update() {
    this.username = <string>sessionStorage.getItem("username");
    this.sessionId = <string>sessionStorage.getItem("sessionId");
}

By doing this I force the update to happen after the get has finished.