Angular service return observable from callback function

Question

I'm using Angular 8.

In my service, I'm using a library which accepts callback function and gives value in the callback function.

My service method is

raw(qrInfo, res?): Observable<string> {

  return manager.getData(res.width, (res1) => {
    return of<string>(res1);
  });
}

I want to subscribe to this raw() method and get the result of res1 in the controller

constructor(
  private myS: MyService
) {}

data() {
  this.myS.raw(info, op).subscribe(res => {
    console.log(res);                              // Get value here
  }
}

But this is not working. How can I return observable from callback function?

i think it should be enough when you do: return manager.getData(res.width); This shuold return the observable to subscribe... There is not need to return on observable again with of() — Okto
– Okto, Commented Nov 14, 2019 at 13:21
Then the manager method starts giving error as callback not defined. The manager method is not returning promise or observable and need callback method to call it. — Anuj TBE
– Anuj TBE, Commented Nov 14, 2019 at 13:24

Martin Paucot · Accepted Answer · 2019-11-14 13:23:46Z

3

You can create a new Observable inside your raw() method by following this documentation to emit the callback result into your Observable.

raw(qrInfo, res?): Observable<string> {
  /** Returns the freshly created Observable **/
  return Observable.create(function(observer) {
    /** Call your method with the callback **/
    manager.getData(res.width, (res1) => {
      /** Emit the callback response to the Observable **/
      observer.next(of<string>res1)
      /** Complete the Observable to close it **/
      observer.complete();
    });
  });
}

edited Nov 14, 2019 at 13:23

answered Nov 14, 2019 at 13:19

Martin Paucot

1,25115 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dino Over a year ago

He's already creating an observable inside the raw method by using of

Ivan Kashtanov Over a year ago

I think it's implied that manager.getData is a callback method without a return value (or at least it's not an Observable) so you have to create it using Observable.create.

Dino · Accepted Answer · 2019-11-14 13:26:33Z

You could create a Subject inside the MyService and then subscribe to it from your component.

managerData$ = new Subject<any>();

raw(qrInfo, res?): Observable<string> {

  manager.getData(res.width, (res1) => {
    this.managerData$.next(res1);
  });
}

And then in component:

constructor(
  private myS: MyService
) {
    this.myS.managerData$.subscribe((res) => { ... } );
  }

data() {
  this.myS.raw(info, op);
}

NOTE: If you need to unsubscribe from it, you can do it like this:

private managerDataSubscription: Subscription;

constructor(
  private myS: MyService
) {
    this.managerDataSubscription = this.myS.managerData$.subscribe((res) => { ... } );
  }

And then you can call this.managerDataSubscription.unsubscribe(); where ever you need (in ngOnDestroy for example)

Collectives™ on Stack Overflow

Angular service return observable from callback function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related