title: Angular 4 Function invoking and asynchronous call issues
body: <p>I am trying to invoke one function from another function in the same component but the other doesn't return any response and other function calls get call. I don't know how to use then and promise keyword in order to wait for the response.</p>
  
  <p>Please let me know where i am going wrong. </p>
  
  <p>I tried every other way to get the coordinates through navigator function but it doesn't returns the coordinates but when i tried to run the same code in browser console it returns the coordinates.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { map, ignoreElements } from 'rxjs/operators' 
  import { catchError } from 'rxjs/operators'
  import { throwError } from 'rxjs/index' 
  import { TouchSequence } from 'selenium-webdriver';
  import { ThrowStmt } from '@angular/compiler';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent implements OnInit {
    title = 'Weather';
    cityName:string = 'delhi';
    backgroundImageUrl:string = '';
    weatherDetails:object = {};
    iconImageUrl:string= '';
    dataSource:any = {};
    latitude:number;
    longitude: number;
  
    constructor(private http: HttpClient){
  
    }
  
    getUserLocation(): any {
      var obj: object = {};
      navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
     function locationSuccess(position) {
       console.log("success");
       console.log(position.coords);
       obj = position.coords;
     }
     function locationError() {
        console.log("error")
     }
  
     return obj;
   }
  
   searchCity(){
      var coords = this.getUserLocation();
      if(coords){
      this.http.get('https://api.openweathermap.org/data/2.5/weather?lat='+coords.latitude+'&amp;lon='+coords.longitude+'&amp;mode=json&amp;appid=')
       .subscribe(
         ((response: any) =&gt; {
           this.dataSource = response;
           if(this.dataSource.weather.length &gt; 0){
             this.weatherDetails = this.dataSource.weather.filter(function(el){return el})[0];
             this.switchBackground();
           }
         }),
         catchError((error) =&gt; {
            return throwError(error);
         })
       )
     }
   }
  
   private switchBackground(){
      var weatherId = this.weatherDetails[0].id;
      switch(weatherId){
       case 711:
        this.backgroundImageUrl = '../assets/images/01-smoke.png';
        this.iconImageUrl = '';
        break;
       case 701:
        this.backgroundImageUrl = '../assets/images/02-mist.jpg';
        this.iconImageUrl = '../assets/images/icons/01-cloudy-sky.png';
        break;
       default :
        break;
     }
   }
  
   // public getLocation(){
  //   let promise = new Promise(function(resolve, reject) {
  //     resolve('resolved');
  //     reject(new Error("Unable to process your request.")); // ignored
  //   });
  //   promise.then(function(response){
  //     this.searchCity();
  //   })
  // } 
  
   ngOnInit(){
      this.getUserLocation();
    }
  }
  </code></pre>
  
  <p>I expect to get http.get call with coordinates in the same but actually it coordinates gets undefined. Can you please help me out.
  Thanks for the help in advance.</p>