How to reuse angular observable across multiple components? (To avoid having to duplicate a request twice?)

Question

I have a service \"MyHttpService\" that includes an observable like this:

grabData() {
return this.http.get(\'myaddress\')
                         .map((res         


        

Answer 1

You can use the share operator to make an observable multicast. This is also relevant within a single component as multiple async bindings to the same osbervable will cause multiple requests to be made. There is a good ng-conf talk here that covers the issue.

import 'rxjs/add/operator/share';

grabData() {
  return this.http.get('myaddress')
                  .map((res:Response) => {return res.json()})
                  .catch((error:any) => Observable.throw(error.json().error || 'Server error'))
                  .share(); 
}