Angular 2: Cannot set property 'location' of null

Question

I am still pretty new to Angular 2 and cant get around this problem.

I am trying to get the users current location and safe his coordinates in a variable called "location". When trying to accomplish this I recieve the following error message:

The code looks like this:

import { Component, AfterViewInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { AgmCoreModule } from 'angular2-google-maps/core';


@Component({
selector: 'app-home',
templateUrl: './app.home.html',
styleUrls: ['./app.home.css']
})
export class HomeAppComponent {
  //restaurants: FirebaseListObservable<any[]>;
  zoom: number = 8;
  lat: number;
  lng: number;
  location: any = {};

  constructor(private af: AngularFire) {
     //this.restaurants = af.database.list('/restaurants');
  }

  ngAfterViewInit() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(this.setPosition);
     }
  }

  setPosition(position) {
     this.location = position.coords;
     console.log(position.coords);
  }

}

When setting propery location to something like:

location.lat = 32;
location.lng = 53;

It is possible to output their values in the constructor, but in the setPosition function its null.

What am I doing wrong....

paste the code as a code block. Avoid screenshot of code – Suraj Rao Jan 20 '17 at 10:45 — Suraj Rao, Jan 20 '17 at 10:45
getCurrentPostion takes a parameterized function? – Suraj Rao Jan 20 '17 at 10:46 — Suraj Rao, Jan 20 '17 at 10:46

Suraj Rao · Accepted Answer · 2017-01-20T11:03:46.187

5

You can call using arrow function like so:

navigator.geolocation.getCurrentPosition((pos)=>this.setPosition(pos))

or if it does not send a parameter,

navigator.geolocation.getCurrentPosition(()=>this.setPosition())

edited Jan 20 '17 at 11:03

answered Jan 20 '17 at 10:50

Suraj Rao

29,388
11
94
103

score 2 · Answer 2 · answered Jan 20 '17 at 10:47

2

navigator.geolocation.getCurrentPosition(this.setPosition)

should be

navigator.geolocation.getCurrentPosition(this.setPosition.bind(this))

Your this is not refering to the page inside setPosition

answered Jan 20 '17 at 10:47

eko

39,722
10
72
98

Thank you very much...working with this confuses me from time to time – kevj Jan 20 '17 at 10:53
@kevj no problem. I suggest you to take a look at this great post :-) http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback/20279485#20279485 – eko Jan 20 '17 at 10:58

Angular 2: Cannot set property 'location' of null

2 Answers2