Angular2 - Component variable value set on callback function not updated in template

Question

User case: When application is opened in web browser, user gets alter- "Know your location" with options "Allow" and "Deny".

I have following code sample.

ngOnInit() {
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition((position) => {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      this.zoom = 18;
    });
  }
}

this works as I can see console.log that the final values of latitude and longitude is current location if allowed otherwise it is the default value which I hard coded.

Now my problem here is this updated current location changes cannot be seen in template when it print {{latitude}} and {{longitude}}

I have tried using ngZone and ChangeDetectorRef but was no success

Can anyone help

Interesting. I thought geolocation is one of the examples where zone is required. Did they fix it in zone.js (didn't follow the development)? — Günter Zöchbauer
– Günter Zöchbauer, Commented May 5, 2017 at 6:05

Günter Zöchbauer · Accepted Answer · 2017-05-05 05:59:45Z

2

The geolocation API is not covered by Angulars zone. Make the callback run inside Angulars zone explicitely and Angular change detection will be run and ensure the view is updated:

constructor(private zone:NgZone) {}

ngOnInit() {
  if ("geolocation" in navigator) {                
    navigator.geolocation.getCurrentPosition((position) => {
      this.zone.run(() => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 18;
      });
    });
  }
}

answered May 5, 2017 at 5:59

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Cijo V J Over a year ago

Hi, I tried the exact same code but it's not working for me :(

Günter Zöchbauer Over a year ago

As yurzui explained it shouln't even be necessary. Please create a plunker that allows to reproduce the problem.

Collectives™ on Stack Overflow

Angular2 - Component variable value set on callback function not updated in template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related