I need help with a child component responsible for updating phone numbers on a webpage. The goal is for the application to automatically display the changed phone number once the user hits the 'save' button.
Here's a visual of how the application should look: https://i.sstatic.net/lLwW5.png
And here's the popup where users can input a new phone number: https://i.sstatic.net/cfUa7.png
The issue I'm facing is that even after hitting the save button in the popup, the application fails to update the phone number immediately. It only updates the number when I manually refresh the page. Can anyone guide me on how to resolve this?
editPhone.component (Popup)
@Output() phoneChanged = new EventEmitter<string>();
constructor(private _http: HttpClient, private _phone: PhoneService){}
//Function triggered upon clicking the 'Save' button
savePhone(patientOrder: PatientOrder, phoneText: string){
this._phone.patientId = patientOrder.patientId;
return this._http.post('service', this._phone).subscribe((result:any) => {
this._phone.phoneText = result.phoneNumber;
this.phoneChanged.emit(this._phone.phoneText);
});
}
view.component (Application displaying the updated phone number)
phoneNumber: string = "";
phoneChanged(phone: string){
//I can't seem to reach this point. Despite no errors, the console isn't logging anything.
console.log(phone);
}
view.html (Template)
<new-orders>
<div (phoneChanged)="phoneChanged($event)">{{phoneNumber}}</div>
</new-orders>
To avoid unnecessary questions, let it be known that everything in my application works fine except for this specific part that needs fixing.