Angular Component calls Service that calls service: both need to do something with result

Question

I'm not sure how to word this question.

I have an Angular component that needs to call a method on a service class. That method needs to call an http method through my own http service, then do something with the result.

But then the component also needs to do something in response to the service call. So I have something like the following pseudo-code:

In component:

public doSomethingInService(payload: any): void {
    this.myService.doSomething(payload);
    // I also need to do something with the result!
}

In service:

public doSomething(payload: any): void {
    this._httpService.doGet(url).subscibe((result) => {
        // do something with the result
    });
}

Okay so now the component never has a chance do its thing.

Things that I've tried:

1. Have the service method doSomethingInService() return an observable instead of a void That way I can respond to both success and error conditions. The problem: If it just returns the observable that the httpService's doGet() method gives me:

public doSomething(payload: any): Observable<any>{
    return this._httpService.doGet(url);
    // I never get a chance to react the doGet result
}

...then the service's doSomethingInService() method never gets a chance to do its thing with the result.

2. Have the service call doSomething() return an observable, but not the one from the httpService's doGet() method. So the service method can still subscribe to the httpService's doGet() observable, and do something with the result, but because it itself returns an observable, the component can subscribe to that, and do its own thing with the result. I just have no idea how to code this.

   3. Have the httpService's doGet() method not return an observable, but a Subject. Then I could wire up two observers: (1) the doSomething() method that called it, and (2) the component. Again, I just can't figure out how to wire this up. Also, the order of execution is important. The angular service doSomething() method must first do its thing with the result, then the component's doSomethingInService() can go after that.

I know this has probably already been answered, but I'm so new to rxjs I can't figure out how to word the query.

Thanks.

Answer 1

This can be accomplished using tap and returning the observable from the service.

service.ts

public doSomething(payload: any): Observable<TypeHere> {
    return this._httpService.doGet(url).pipe(tap((result) => {
        // do something with the result
    }));
}

component.ts

public doSomethingInService(payload: any): void {
    this.myService.doSomething(payload).subscribe(_ => /* do something */);
}

---

From the documentation

Tap

Transparently perform actions or side-effects, such as logging

If you would rather transform the result before returning it to the component/subscriber you can use map instead.

side note I am not sure what doGet is. Just use get<T> on HttpClient.