How to return an observable from a http service in angular2

Question

Unfortunately as I was storing many results on the service, I'm now stuck with many {{myservice.somevalue}} (and myservice.someother) etc. sprinkled over my other components.

I believe it would be nicer to return from the service to a component.

This is the code that I have on the service:

getIssue(issueName: string) {
    return this.http.post(this.URL + 'issue/all', JSON.stringify({'issueName': issueName}))
                    .subscribe(data => this.somevalue = data.json(),
                                err => console.log(err));
}

So then on several other components I call functions like this.myservice.getIssue(issueName).

In the HTML I'd prefer to use {{somevalue}}.

What can I do to return a http observable from the http service?

It's kinda unclear what do you want to do ? return this.http.post(....) is already an Observable. So you do return an Observable from the http service ¯_(ツ)_/¯ — Tiberiu Popescu
– Tiberiu Popescu, Commented Apr 24, 2016 at 18:10
@tibs I completely agree it sounds silly. Unfortunately I'm not really sure how to describe what I'm looking for. — PascalVKooten
– PascalVKooten, Commented Apr 24, 2016 at 18:23

Community · Accepted Answer · 2017-05-23 11:54:13Z

1

class SomeService {
  someValue = new BehaviorSubject();

  getIssue(issueName: string) {
      return this.http.post(this.URL + 'issue/all', JSON.stringify({'issueName': issueName}))
                      .subscribe(data => this.somevalue.next(data.json()),
                                  err => console.log(err));
  }
}

In your component

class MyComponent {
  constructor(someService:SomeService) {
    someService.someValue.subscribe(val => {
      this.someValue = val;
    });
  }
}

For an alternative approach see also https://stackoverflow.com/a/36291681/217408

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 24, 2016 at 17:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

6 Comments

PascalVKooten Over a year ago

That this.somevalue.next is new. How does that work? And what is BehaviorSubject, where does it come from?

PascalVKooten Over a year ago

Does this not introduce overhead; it seems like more work is done?

Günter Zöchbauer Over a year ago

This is very cheap in relation to for example a DOM manipulation or even a server call.

PascalVKooten Over a year ago

So does this solve the problem I think I'm having; is it a good practice?

Günter Zöchbauer Over a year ago

Basically yes. It might vary slightly depending on the actual use case. See also stackoverflow.com/a/36291681/217408

|

Collectives™ on Stack Overflow

How to return an observable from a http service in angular2

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related