CODEWITHSUNDEEP
javascriptangulartypescriptgeolocation
Lester
Lester

Reputation: 385

Why am I unable to access class properties inside of a passed function of an Angular component?

I am using HTML 5 geolocation inside an Angular component:

...
    export class AngularComponent {
    ...
        constructor(private db: DatabaseService) {}

        // this function is assigned to an HTML button
        logCoords(message, action) {
        navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);
        }

        success(pos) {
            function time() {
            ...
            }
            var crd = pos.coords;
            var lat = crd.latitude
            var long = crd.longitude

            let newCoordinates = {'lat': lat, 'long':long, 'time': time}
            this.db.addLocation(newCoordinates)
        }
    ...
    }
...

I want to store the result of the getCurrentPosition Method inside indexed db using an Angular service but I am unable to access any properties of the component class (this.db is null).

Why I am unable to access this.db inside the success function and how I might be able to work around this?

Upvotes: 0

Views: 440

Answers (2)

Suneet Bansal
Suneet Bansal

Reputation: 2702

Issue is with the below line:

navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);

In above line, you are just passing this.success as callback without setting context to it. So in this case as per javascript principles, this would always refer to window object while you are expecting component reference.
To fix this, you have to set the context (component instance) before passing this.success and for that purpose javascript provided bind() function.

Try below code (very simple fix) -

navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options);

For more details around bind() function refer below link -

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Upvotes: 1

Tiep Phan
Tiep Phan

Reputation: 12596

Because you lose the context this when passing the method as a callback. You can fix this by multiple ways:

logCoords(message, action) {
    // bind context
    navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options);
}

or

logCoords(message, action) {
    navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);

    success = (pos) => {} // <= arrow function
    error = () => {}      // <= arrow function
}

Upvotes: 1

Related Questions