Accessing variables in Angular2 view

Question

How can I view the coordinates returned in my template?

export class DashboardPage {
  constructor(public navCtrl: NavController) {
    Geolocation.getCurrentPosition().then(pos => {
        console.log(pos.coords.latitude, pos.coords.longitude);
    });
  }
}

I have tried:

export class DashboardPage {

  constructor(public navCtrl: NavController) {

    Geolocation.getCurrentPosition().then(pos => {
        this.latitude = pos.coords.latitude;
        this.longitude = pos.coords.longitude;
    });

  }

}

But this gives me an error:

Typescript Error
Property 'latitude' does not exist on type 'DashboardPage'.
src/pages/dashboard/dashboard.ts
Geolocation.getCurrentPosition().then(pos => {
this.latitude = pos.coords.latitude;
this.longitude = pos.coords.longitude;

I was hoping to be able to use {{ latitude }} and {{ longitude }} within my template

Answer 1

You need to declare your properties:

export class DashboardPage {

  latitude: number;
  longitude: number;

  constructor(public navCtrl: NavController) {

    Geolocation.getCurrentPosition().then(pos => {
        this.latitude = pos.coords.latitude;
        this.longitude = pos.coords.longitude;
    });
  }
}

Answer 2

If you want to be more angular2/rxjs oriented:

export class DashboardPage {
  geoData$: Observable<any>;
  constructor(public navCtrl: NavController) {
    this.geoData$ = Observable.fromPromise(Geolocation.getCurrentPosition());
  }

}

and then in your view:

<div>lat: {{(geoData$|async)?.latitude}}</div>