Angular2 RC1 Best Approach to implement loading indicator

I can see two ways to do what you are after. The first one is to abstract all the Http requests to dedicated services, and the second is to wrap Http service.

Services. It is probably not the best idea to make Http requests from your component anyway, hence better approach would be to move http-stuff into dedicated services and set _globalService.isLoading flag from there. Component should not know about these things, it would only care about things like "getAccounts", etc. So abstracting actual Http request could make loading indicator flag hidden from component code.

Wrapping default Http service. It is totally possible to wrap Http service into one more layer from which isLoading flag could be set. In this case Component code would not know anything about loading indicator machinery too.

Possible wrapper could look something like this:

import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
import {GlobalService} from './globalService';

export class HttpLoading extends Http {

  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService ) {
    super(backend, defaultOptions);
  }

  get(url: string, options?: RequestOptionsArgs) {
    this._globalService.isLoading = true;
    return super.get(url, options)
      .map(res => {
        this._globalService.isLoading = false;
        return res;
      });
  }
}

and registered as

bootstrap(App, [
  GlobalService,
  HTTP_PROVIDERS,
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService),
    deps: [XHRBackend, RequestOptions, GlobalService]
  })
])

Demo: http://plnkr.co/edit/S5nSpscC3tIwX63lrBtO?p=preview