I have a property in an object in an Angular service that is bound to a text field in a component's html.
When the property is updated by the service, the new value is not showing in the html element until I click on the element.
I cannot figure out why the new value isn't immediately showing in the text field without having to click on the element to get the new value.
The console.log message in the update function shows that the object is updated correctly, it's just that the data is not making it through to the form field until the element is clicked.
The code is below:
parent.component.html
<input [(ngModel)]="service.serviceObj.data" type="text" />
service.service.ts
public serviceObj = {} as any;
...
updateObj() {
this.serviceObj.data = 'new value';
console.log('this.serviceObj = ', this.serviceObj);
}
...
Your input is referencing:
service.selectedMarker.data
But your setting:
this.serviceObj.data = 'new value'
serviceObj vs selectedMarker. Did you mean to do this?
<input [(ngModel)]="service.serviceObj.data" type="text" />
you can always make a copy of the object like this:
const obj= JSON.parse(JSON.stringify(<objToCopy>));
then make the mutation in the obj and assign the service property to the mutated copy obj ("this.yourObj = obj")