title: Typescript getCurrent location and pass to backend to get the result and pass to Material Table data source
body: <p>I have my Angular 2 project that tries to get user's current location, therefore in my class I have the following code:</p>
  
  <pre><code>export class CurrentLocation {
    constructor(private http: Http) { }
    private lat : any;
    private lon : any;
    private params  = new URLSearchParams();
    private url = 'api/search/location';
  
  
    getPosition = (lat, lon) =&gt; {
      navigator.geolocation.getCurrentPosition((position) =&gt; { 
        this.lat = position.coords.latitude; 
        this.lon = position.coords.longitude;
       });
    }
    getCurrentLocation(): Observable&lt;any&gt; {
      this.getPosition(this.lat, this.lon);
      console.log(this.lat+ "," + this.lon);
      //console.log(this.lat + ":" + this.lon);
      this.params.set('lat', this.lat);
      this.params.set('lon', this.lon);
      //console.log(this.params.toString());
      var result = this.http.get(this.url, { search: this.params });
      result.toPromise();
      return result;
    }
  }
  </code></pre>
  
  <p>But <code>lat</code> and <code>lon</code> return <code>undefined</code>.. The expected behaviour I want is once I got those latitude and longitude, I will send it to my backend address like following url <code>http://localhost:8080/api/search/location?lat=123&amp;lon=123</code></p>
  
  <p>But it seems like setting value for <code>lat</code> and <code>lon</code> are failed.</p>
  
  <p>How can I properly set the latitude and longitude in this class? </p>
  
  <p><strong>EDIT on August 3:</strong> </p>
  
  <p>According libertyernie's answer below, I can successfully pass the current lat and lon into backend, but I don't know how to convert to Observable, since I try to using Table module in Angular Material, in that module for data source it must be Observable...</p>
  
  <p>Here is the code after I try, but still not working...</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Response, URLSearchParams } from '@angular/http';
  import { DataSource } from '@angular/cdk';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  import { Restaurant } from '../restaurant/restaurant';
  import { Category } from '../category/category';
  import { RestaurantService } from '../restaurant/restaurant.service';
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
    displayedColumns = ['Id', 'Name', 'Category', 'Address', 'City'];
    exampleDatabase: ExampleHttpDatabase | null;
    dataSource: ExampleDataSource | null;
    location: CurrentLocation | null;
    lat: any;
    lon: any;
    result: Promise&lt;any&gt;;
  
    constructor(http: Http) {
      this.exampleDatabase = new ExampleHttpDatabase(http);
      this.dataSource = new ExampleDataSource(this.exampleDatabase);
      this.location = new CurrentLocation(http);
    }
  
    ngOnInit() {
      this.result = this.location.getCurrentLocation(this.lat, this.lon);
      this.result.then(function(result){
        console.log(result._body);
      })
      console.log(this.lat, this.lon);
      this.dataSource.connect();
    }
  }
  
  export class ExampleHttpDatabase {
    private restaurantUrl = 'api/restaurant'; // URL to web API
    getRestaurants(): Observable&lt;Restaurant[]&gt; {
      var result = this.http.get(this.restaurantUrl)
        .map(this.extractData);
      result.toPromise();
      return result;
    }
  
    extractData(result: Response): Restaurant[] {
      return result.json().map(restaurant =&gt; {
        return {
          id: restaurant.id,
          name: restaurant.restaurant_name,
          category: restaurant.category.map(c =&gt; c.categoryName).join(','),
          address: restaurant.address.address,
          city: restaurant.address.city.city_name
        }
      });
    }
    constructor(private http: Http) { }
  }
  
  export class CurrentLocation {
    constructor(private http: Http) { }
    private lat: any;
    private lon: any;
    private params = new URLSearchParams();
    private url = 'api/search/location';
  
  
    getPosition = () =&gt; {
      var latitude, longitude;
      return new Promise((resolve, reject) =&gt; {
        navigator.geolocation.getCurrentPosition((position) =&gt; {
          resolve(position.coords);
        }, (err) =&gt; {
          reject(err);
        });
      })
    }
    async getCurrentLocation(lat, lon): Promise&lt;any&gt; {
      let coords = await this.getPosition();
      lat = this.lat = coords['latitude'];
      lon = this.lon = coords['longitude'];
      this.params.set('lat', this.lat);
      this.params.set('lon', this.lon);
      var result = this.http.get(this.url, { search: this.params });
      return await result.toPromise();
    }
  }
  
  export class ExampleDataSource extends DataSource&lt;Restaurant&gt; {
    constructor(private _exampleDatabase: ExampleHttpDatabase) {
      super();
    }
  
    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable&lt;Restaurant[]&gt; {
      return this._exampleDatabase.getRestaurants();
    }
  
    disconnect() { }
  }
  </code></pre>
  
  <p>Sorry about the code is a little bit confusing.. But I don't know how to pass the result into <code>connect()</code> function to make Material Table works..</p>
  
  <p>Full code also in Github: <a href="https://github.com/zhengye1/Eatr/tree/dev" rel="noreferrer">https://github.com/zhengye1/Eatr/tree/dev</a></p>