How to return value from function which has Observable subscription inside?

by

EDIT: updated code in order to reflect changes made to the way pipes work in more recent versions of RXJS. All operators (take in my example) are now wrapped into the pipe() operator.

I realize that this Question was quite a while ago and you surely have a proper solution by now, but for anyone looking for this I would suggest solving it with a Promise to keep the async pattern.

A more verbose version would be creating a new Promise:

function getValueFromObservable() {
    return new Promise(resolve=>{
        this.store.pipe(
           take(1) //useful if you need the data once and don't want to manually cancel the subscription again
         )
         .subscribe(
            (data:any) => {
                console.log(data);
                resolve(data);
         })
    })
}

On the receiving end you will then have “wait” for the promise to resolve with something like this:

getValueFromObservable()
   .then((data:any)=>{
   //... continue with anything depending on "data" after the Promise has resolved
})

A slimmer solution would be using RxJS’ .toPromise() instead:

function getValueFromObservable() {
    return this.store.pipe(take(1))
       .toPromise()   
}

The receiving side stays the same as above of course.

More Related Contents:

  1. Angular 2 – Return data directly from an Observable
  2. Chaining RxJS Observables from http data in Angular2 with TypeScript
  3. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  4. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  5. How to achieve a debounce service on input keyup event in angular2 with rxjs
  6. RxJs get value from observable
  7. What is pipe for in RxJS?
  8. How to create an Observable from static data similar to http one in Angular?
  9. RxJs Array of Observable to Observable of Array
  10. Expression ___ has changed after it was checked
  11. How do I actually deploy an Angular 2 + Typescript + systemjs app?
  12. How to use moment.js library in angular 2 typescript app?
  13. How can I declare a global variable in Angular 2 / Typescript? [closed]
  14. Angular2 – should private variables be accessible in the template?
  15. How do you deploy Angular apps?
  16. RxJS: takeUntil() Angular component’s ngOnDestroy()
  17. Angular2 – Http POST request parameters
  18. Angular 2 View will not update after variable change in subscribe
  19. Angular2 handling http response
  20. Rxjs toPromise() deprecated
  21. Angular subscribe elegant
  22. Integrating Material Design Lite with Angular2
  23. How can I declare a global variable in Angular 2 and up / Typescript? [closed]
  24. How to return observable from subscribe
  25. How to implement Custom Async Validator in Angular2/4/5
  26. Import gapi.auth2 in angular 2 typescript
  27. Angular 2 loader on each http request
  28. What exactly $event object do in Angular 2?
  29. How to pass results between chained observables
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment