Within my Angular service, I have a property linked to a text field in a component's HTML.
Oddly, when this property is updated by the service, the new value doesn't reflect in the HTML element unless the element is clicked on.
I'm perplexed as to why the updated value isn't immediately displayed without requiring manual interaction with the element.
Even though the console log within the update function confirms that the object is being updated correctly, the data still doesn't populate in the form field until it's clicked on.
Here's the relevant code:
In parent.component.html
<input [(ngModel)]="service.serviceObj.data" type="text" />
In service.service.ts
public serviceObj = {} as any;
...
updateObj() {
this.serviceObj.data = 'new value';
console.log('this.serviceObj = ', this.serviceObj);
}
...