N.B. This post assumes a working knowledge of angular’s HTTP service, the async pipe and a little Rxjs.

If like me you’re taking your first steps with angular 2 and the daunting new world of observables, then the following post will outline an efficient strategy when communicating with an API using angular’s HTTP service.

Before we start I need to make something clear. I’m no Rx expert. I’m no Ben Lesh or André Staltz. Far from it. I’m just beginning my journey into the magical world of reactive programming and to properly sum up where I am on that journey, here’s a baby giraffe.

So let’s set the scene. I have a wizard service that goes off to the wizard endpoint in the API and fetches some data. The component consumes the data and outputs it to the view. Pretty standard stuff.

Our service returns an observable to our component which we then consume in our view via the async pipe. No need to subscribe to the observable as the async pipe takes care of this for us, making our component clean and lean.

Everything looks hunky dory, right? On the surface yes but take a peek inside the network tab in your developer tools and you will see a call to the API for every subscription to the observable.