Visual Feedback Service for angular http calls v2

So I started writing a feedback service for angular“™s http calls. The idea is simple. When my app does http calls, I want my spinner to spin!

Now you don“™t want to constantly set a „˜loading“™ flag in your components somewhere or manually show loading overlays all the time right? All you want is a small spinner in the top right that spins on activity. Maybe you also want a toast or some notification to be shown on completed transactions.

I started building this and wrote about it in this blog post, so if you want to read the full story, read that one first.

Version 2: Pulling the UI feedback code out of the API Service

In my previous post, you had to call the vFeedbackService from somewhere when you did an http call and pass it the observable. That was ugly! Sure you could get spinners and toasts in 2 lines of code, but you want 0 lines of code in your components! Just a spinner, is that too much to ask?

So new plan:

1. Hook into the code that angular uses to make HTTP calls. Grab those events!
2. Create an observable based on those events. Use it to notify spinner components of stuff going on
3. Write a spinner component that hooks into this and spins every time when HTTP calls are going on. All other code is untouched

Digging through the Angular code

If you don“™t care about this, just skip below to the solution.

Digging into the http code of Angular 2, it becomes clear how it works and what to do. Http uses a ConnectionBackend which is used to create a connection. This connection is created using BrowserXhr.build() (in the browser). So if we wrap this, returning the original object (XMLHttpRequest) but hooking into its events, we“™re good. We get all http requests and their open, load, error, abort and progress events.

Creating the new Service to subscribe to

To hook into the events, we override the build() method of BrowserXhr to ensure we grab the events before handing back the original object.

[code language=“javascript“]
//imports …

export class CustomBrowserXhr extends BrowserXhr {

private _observable: Observable;
private _subscriber: Subscriber;

constructor() {
super();
this._observable = Observable.create(subscriber => {
this._subscriber = subscriber;
}).share();
}

get observable(): Observable {
return this._observable;
}

build(): any {
let xhr = super.build();
if (!this._subscriber) return xhr;

//at the beginning, we create an event that notifies an opening of a connection
this._subscriber.next({type: ‚open‘, event: {}});

xhr.onprogress = (event) => {
this._subscriber.next({type: ‚progress‘, event: event});
};
xhr.onload = (event) => {
this._subscriber.next({type: ‚load‘, event: event});
};
xhr.onerror = (event) => {
this._subscriber.next({type: ‚error‘, event: event});
};
xhr.onabort = (event) => {
this._subscriber.next({type: ‚abort‘, event: event});
};

return xhr;
}

}
[/code]