How to return value from function to component in angular-CodePudding

I have created this function my service but I want to return the poistion lat and long to component. I have tried to use pipe but i am confused How i can you pipe here and get the data in component.

geocodeAddress(addressInput) {
        this.geoCoder = new google.maps.Geocoder(); 
        const address = addressInput;
        console.log(address);
        this.geoCoder.geocode({'address': address}, (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location.lat());
            this.position = {
                          "lat": results[0].geometry.location.lat(),
                          "lng": results[0].geometry.location.lng()
                      }
            return this.position;
          } else {
            console.log('Error - ', results, ' & Status - ', status);
          }
        });
      }

In component I have tried subscribe but unable to fix this issue

 this.geoLocationLatLong.geocodeAddress(Rochdale,Uk')
    .subscribe((location: Location) => {
      console.log(location);
         this.location = location; 
      });

I am just confused because How i can use pipe in geocodeaddress function.

CodePudding user response：

You can convert the asynchronous geocoder call into an observable. That is something you can use pipe on:

export interface GeocodedLocation {
  latitude: number;
  longitude: number;
}

geocodeAddress(address: string): Observable<GeocodedLocation> {
  return new Observable<GeocodedLocation>((observer) => {
    this.geoCoder.geocode({ address }, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        observer.next({
          latitude: results[0].geometry.location.lat(),
          longitude: results[0].geometry.location.lng()
        });
      } else {
        observer.error(new Error(`Error - ${results} & Status - ${status}`));
      }
    });  
  });
}

You can then subscribe to the returned observable in your component and display the result:

this.geoLocationLatLong.geocodeAddress('Rochdale,Uk').subscribe((result) => {
  console.log('geocoded result', result);
});

CodePudding user response：

You are using asynchronous code and expect it to behave synchronously.

Replace with this.

geocodeAddress(addressInput) {
        this.geoCoder = new google.maps.Geocoder(); 
        const address = addressInput;
        console.log(address);
        return new Promise((res, rej) => {
          this.geoCoder.geocode({'address': address}, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
              console.log(results[0].geometry.location.lat());
              this.position = {
                          "lat": results[0].geometry.location.lat(),
                          "lng": results[0].geometry.location.lng()
                      }
              res(this.position);
            } else {
              console.log('Error - ', results, ' & Status - ', status);
              rej({ results, status });
            }
          });
        });
      }

 this.geoLocationLatLong.geocodeAddress('Rochdale,Uk')
    .then((location: Location) => {
      console.log(location);
         this.location = location; 
      });