ngModel updates in controller, but not in the view, angular 2

Question

I have an input in my view:

  <label for="map-latitude_input">Latitude {{mapLatitudeInput}}</label>
  <input
    type="text"
    placeholder="00.000"
    [(ngModel)]="mapLatitudeInput"
    [ngFormControl]="newListingForm.find('mapLatitudeInput')"
    id="map-latitude_input"
    class="transparent">

and inside my controller I am listening to map drag event from google maps api. On drag I want to update value inside my input and in its associated label. At the moment this looks like this:

//Update coordinates on map drag
map.addListener('drag', (event) => {
  this.mapLatitudeInput = map.getCenter().lat();
  console.log(this.mapLatitudeInput);
});

Now when I drag a map console keeps outputting correct value as I move it around, however in my view it stays exactly the same. What I also noticed is that if I drag map around and than do some action like select an option in select menu within same form that my input is in, it updates mapLatitudeInput to correct value, i'm not sure why this happens, but thought I'd mention it.

I assume `map.getCenter().lat();` returns the same object every time only with updated values. You could verify that by comparing the returned value with the previous one. — Günter Zöchbauer, Jan 15 '16 at 10:20
@GünterZöchbauer What confuses me is that printing this.mapLatitudeInput in console actually shows me that it is updating as I expect, however it does not reflect in the view input, value there stays the same unless I do other actions in the form, i.e start typing in another input or something. Do you reckon this could be a bug within angular 2? — Ilja, Jan 15 '16 at 10:24
Your question doesn't provide enough information. It could as well be a zone issue like @thierrytemplier explained in his answer. — Günter Zöchbauer, Jan 15 '16 at 10:27

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

It's perhaps due to ZoneJS. This question could give you some hints: View is not updated on change in Angular2.

From where do you get your map instance. If it's instantiated outside a zone, Angular2 won't be able to detect updates of the mapLatitudeInput attribute.

You could try something like that:

export class MapComponent {
  constructor(ngZone:NgZone) {
    this.ngZone = ngZone;
  }

  map.addListener('drag', (event) => {
    this.ngZone.run(() =>
      this.mapLatitudeInput = map.getCenter().lat();
      console.log(this.mapLatitudeInput);
    });
  });

This question could be also related to your problem: Angular2 child property change not firing update on bound property.

Hope it helps you, Thierry

edited May 23 '17 at 12:17

Community

1
1

answered Jan 15 '16 at 10:20

Thierry Templier

198,364
44
396
360

It's part of `angular2/core`. See this link: https://angular.io/docs/ts/latest/api/core/NgZone-class.html. Just import it and use it as constructor parameter... – Thierry Templier Jan 15 '16 at 10:33
You are outstanding help, thank you so much for your answers, it is really helping me out in learning angular 2. – Ilja Jan 15 '16 at 10:36
In addition you could read the Mark Rajcok's awesome answer on ZoneJS / Angular2: http://stackoverflow.com/questions/34569094/what-is-the-angular2-equivalent-to-an-angularjs-watch ;-) – Thierry Templier Jan 15 '16 at 10:41
I will be reading a lot about angular 2 this weekend, thats for sure. Just jumped on it to make a test project to see if I like it, hence tons of questions haha, but so far it's been amazing. – Ilja Jan 15 '16 at 10:51

ngModel updates in controller, but not in the view, angular 2

1 Answers1

Linked