title: Detecting Location with Angular 7
body: <p>I have a problem with detecting location using Angular.</p>
  
  <p>I know in order to detect Location, I use HTML5 geolocation api.</p>
  
  <pre><code>window.navigator.geolocation.getCurrentPosition(
      (position) =&gt; {
        /* Location tracking code */
        this.currentLocation = position.coords;
        callback(position.coords);
      },
      (failure) =&gt; {
        if (failure.message.indexOf("Only secure origins are allowed") == 0) {
          alert('Only secure origins are allowed by your browser.');
        }
      }
    );
  </code></pre>
  
  <p>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?</p>
  
  <p>Please find the full code cycle below.</p>
  
  <p>Landing Page</p>
  
  <pre><code>@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) =&gt; {
          let weatherDetails = this.mapWeatherResponse(res);
          this.weatherDetailsArray.push(weatherDetails);
        });
    }
  }
  </code></pre>
  
  <p>The code in WeatherService</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class WeatherService {
    private _baseUrl = "http://api.worldweatheronline.com/premium/v1/weather.ashx?key={some api key}&amp;format=json";
    private currentLocation: any = {};
  
    constructor(private http: HttpClient) {}
  
    _getLocation(callback): void {
      if (window.navigator.geolocation) {
        window.navigator.geolocation.getCurrentPosition(
          (position) =&gt; {
            // "this" here in the weather service is seen however currentLocation is always ""
            this.currentLocation = position.coords;
            callback(position.coords);
          },
          (failure) =&gt; {
            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}&amp;num_of_days=5&amp;includelocation=yes&amp;tp=24&amp;q=${cityName}`);
    }
  }
  </code></pre>
  
  <p>My question here, How can I access this._weatherService.getCityWeatherDetails(latLang)</p>