'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 |
|---|
