Angular 2/4 - Tela de carregamento em todas as chamadas ajax

app.component.html

<div class="spinner" *ngIf="loadingService.count > 0" style="cursor: pointer" title="{{ loadingService.count }}"></div>

http.service.ts

import { BootstrapGrowlService, BootstrapAlertType } from 'ngx-bootstrap-growl';
import { LoadingService } from './loading.service';
import { Injectable } from '@angular/core';
import { Http, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/observable/throw';

@Injectable()
export class HttpService extends Http {

  constructor(
    backend: XHRBackend,
    defaultOptions: RequestOptions,
    private loadingService: LoadingService) {

    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {

    // exibição da tela de carregamento
    this.loadingService.show();

    return super.request(url, options)
      .map((response: Response) => {

        this.loadingService.hide();
        
        return response;
      })
      .catch((error: Response) => {
      
        this.loadingService.hide();
        
        return Observable.throw(error);
      });

  }

}

loading.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class LoadingService {

  public count = 0;

  constructor() {
  }

  show() {
    this.count += 1;
  }

  hide() {
    if (this.isLoading()) {
      this.count -= 1;
    }
  }

  isLoading(): boolean {
    return this.count > 0;
  }

}