CODEWITHSUNDEEP
angularangular7
Willy
Willy

Reputation: 3824

Detecting Location with Angular 7

I have a problem with detecting location using Angular.

I know in order to detect Location, I use HTML5 geolocation api.

window.navigator.geolocation.getCurrentPosition(
    (position) => {
      /* Location tracking code */
      this.currentLocation = position.coords;
      callback(position.coords);
    },
    (failure) => {
      if (failure.message.indexOf("Only secure origins are allowed") == 0) {
        alert('Only secure origins are allowed by your browser.');
      }
    }
  );

My problem is when I use inside an angular class, the "this" is always pointing to the success function and not to the class itself. How do I access the class properties?

Please find the full code cycle below.

Landing Page

@Component({
  selector: 'app-landing-page',
  templateUrl: './landing-page.component.html',
  styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent implements OnInit {
  weatherDetailsArray: any = [];
  searchQuery: string = "";
  hasError: boolean = false;
  errorMessage: string = "";

  constructor(private _weatherService: WeatherService) { }

  ngOnInit() {
    // I get the location here and pass the function to be executed in the success callback
    this._weatherService._getLocation(this.detectLocation);
  }

  detectLocation (position) {
    const latLang = `${position.latitude}/${position.longitude}`;
    // "this" is undefined here
    this._weatherService.getCityWeatherDetails(latLang)
      .subscribe((res: any) => {
        let weatherDetails = this.mapWeatherResponse(res);
        this.weatherDetailsArray.push(weatherDetails);
      });
  }
}

The code in WeatherService

@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private _baseUrl = "http://api.worldweatheronline.com/premium/v1/weather.ashx?key={some api key}&format=json";
  private currentLocation: any = {};

  constructor(private http: HttpClient) {}

  _getLocation(callback): void {
    if (window.navigator.geolocation) {
      window.navigator.geolocation.getCurrentPosition(
        (position) => {
          // "this" here in the weather service is seen however currentLocation is always ""
          this.currentLocation = position.coords;
          callback(position.coords);
        },
        (failure) => {
          if (failure.message.indexOf("Only secure origins are allowed") == 0) {
            alert('Only secure origins are allowed by your browser.');
          }
        }
      );
    }
    else {
      console.log("Your browser doesn't support geolocation");
    }
  }

  getCityWeatherDetails(cityName: string = "Egypt") {
    return this.http.get(`${this._baseUrl}&num_of_days=5&includelocation=yes&tp=24&q=${cityName}`);
  }
}

My question here, How can I access this._weatherService.getCityWeatherDetails(latLang)

Upvotes: 0

Views: 3521

Answers (1)

Frank Modica
Frank Modica

Reputation: 10516

Your callback is being invoked as a function instead of a method, so it's losing its this context:

this._weatherService._getLocation(this.detectLocation);

Try this:

this._weatherService._getLocation(position => this.detectLocation(position));

Or this:

this._weatherService._getLocation(this.detectLocation.bind(this));

Or switch to an arrow function:

detectLocation = (position) => { ... }

Upvotes: 1

Related Questions