'How do I update my UI after updating the database? (Angular + typescript)

I have a session variable called 'c_user' that holds the information of the current user and certain elements of the UI that are linked to it. I also created a service that manages to successfully change this information in the database. How do I update the session variable in order to hold the new information?

This is the service 'new-user.ts' that is supposed to get the updated information from the database:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NewUserService {

  url = "https://localhost:44344/AutoFinder/FindNewUser/"

  constructor(private http: HttpClient) { }

  newUser(data: any){
      return this.http.get(this.url + data).subscribe((result) => {
          sessionStorage.setItem('c_user',JSON.stringify(result))
          console.log(JSON.parse(sessionStorage.getItem('c_user') as string))
      })
  }
}

This is the component 'account-edit.component.ts' which calls the service:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { EditAccountService } from 'src/app/Services/edit-account.service';
import { HttpClient } from '@angular/common/http';
import { NewUserService } from 'src/app/Services/new-user.service';

@Component({
  selector: 'app-account-edit',
  templateUrl: './account-edit.component.html',
  styleUrls: ['./account-edit.component.scss']
})
export class AccountEditComponent implements OnInit {

  public session_user:any = []

  urlFind = "https://localhost:44344/AutoFinder/FindUserSignIn/"

  EditUser = new FormGroup({

    firstname: new FormControl('',Validators.required),
    lastname: new FormControl('',Validators.required),
    username: new FormControl('',Validators.required),
    password: new FormControl('',[Validators.required,Validators.minLength(5)]),
    email: new FormControl('',Validators.required),
    phonenumber: new FormControl('',[Validators.required,Validators.maxLength(10)]),

    streetname: new FormControl('',Validators.required),
    streetnumber: new FormControl('',[Validators.required,Validators.min(1)]),
    city: new FormControl('',Validators.required),
    stateprovince: new FormControl('',Validators.required),
    country: new FormControl('',Validators.required),

})


  constructor(private router: Router, private EU: EditAccountService, private http: HttpClient, private NU: NewUserService) {
    this.session_user = JSON.parse(sessionStorage.getItem('c_user') as string)
    //console.log(JSON.parse(sessionStorage.getItem('c_user') as string))
  }    

  ngOnInit(): void {
    
  }


  submitUserEdit(){
    if(this.EditUser.valid)
    {

      this.EditUser.value['userID'] = this.session_user[0].userID
      this.EU.editUser(this.EditUser.value)
      this.NU.newUser(this.session_user[0].userID)
      //sessionStorage.setItem('c_user', JSON.stringify(this.EditUser.value))
      this.router.navigate(["../Account"])
    }
    else
    {
      window.alert("Invalid data!")
      console.log(this.EU.editUser(this.EditUser.value))
    }
  }

}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source