BindCallback observable never get next value, while manual bind works

Question

using google.maps.places.PlacesService and the getDetails query

the method signature is

(method) google.maps.places.PlacesService.getDetails(
      request: google.maps.places.PlaceDetailsRequest, 
      callback: (
         a: google.maps.places.PlaceResult, 
         b: google.maps.places.PlacesServiceStatus
      ) => void)
): void

I would expect the following to works

  getDetails$(request: google.maps.places.PlaceDetailsRequest) {
    const request$ = bindCallback(this.placeService.getDetails);
    return request$(request);
  }

  this.getDetails$({ placeId: place.place_id })
      .pipe(
        tap((e) => {
          console.log(e);
        })
      )
      .subscribe(([info]) => console.log(info));

but it doesn't trigger the callback at all.

If I do it manually :

  getDetails$(request: google.maps.places.PlaceDetailsRequest) {
    return new Observable<google.maps.places.PlaceResult>((observer) => {
      this.placeService.getDetails(request, (result, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          observer.next(result);
        } else {
          observer.error(status);
        }
        observer.complete();
      });
    });
  }

  this.getDetails$({ placeId: place.place_id })
      .pipe(
        tap((e) => {
          console.log(e);
        })
      )
      .subscribe(([info]) => console.log(info));

now my logs works.

What am I doing wrong with bindCallback ?

Answer 1

Here is en example that works for me

  getPlaceDetails(placeId: string) {
    let observable = bindCallback(
      this.placeService.getDetails.bind(this.placeService),
      (results, status) => {
        if (status != google.maps.places.PlacesServiceStatus.OK) throw {status, results};
        return results
      }
    )
    return observable({placeId, fields: ['ALL']})
  }