Angular service not updating component html element

Question

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);
}

...

How do you call updateObj() in the parent.component.ts? We need more code to find out your problem… — SwissCodeMen
– SwissCodeMen, Commented Jan 18, 2022 at 22:23

Mathew Berg · Accepted Answer · 2022-01-18 22:21:14Z

1

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" />

answered Jan 18, 2022 at 22:21

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlphaBeta Over a year ago

Sorry, that was a typo. I've just updated the OP with serviceObj.

MauricioCavallini · Accepted Answer · 2022-01-19 08:22:12Z

0

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")

answered Jan 19, 2022 at 8:22

MauricioCavallini

11 bronze badge

Collectives™ on Stack Overflow

Angular service not updating component html element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related