title: Angular 2 loader on each http request
body: <p>What i am trying to do is: <br>
  I want to use the spinner whenever a http request accurs. In other words i want user to see a loading screen whenever a http request happens in my app.component. <br>
  My spinner.component and spinner-service files are same with the answer in <a href="https://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-routes-in-angular-2">this</a> question.<br>
  And my app.component's component is</p>
  
  <pre><code>@Component({
      selector: 'todoApi',
      template: `
          &lt;div class="foo"&gt;
              &lt;spinner-component&gt;&lt;/spinner-component&gt;
              &lt;h1&gt;Internship Project&lt;/h1&gt;
              &lt;a [routerLink]="['Dashboard']"&gt;Dashboard&lt;/a&gt;
              &lt;a [routerLink]="['Tasks']"&gt;List&lt;/a&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;div&gt;
      `,
      directives: [ROUTER_DIRECTIVES,SpinnerComponent],
      providers: [
          ROUTER_PROVIDERS,
      ]
  })
  
  @RouteConfig([
      {
          path: '/dashboard',
          name: 'Dashboard',
          component: DashboardComponent,
          useAsDefault: true
      },{
          path: '/tasks',
          name: 'Tasks',
          component: TaskComponent
      },{
          path: '/detail/:id',
          name: 'TaskDetail',
          component: TaskDetailComponent
      },
  ])
  </code></pre>
  
  <p>To conclue , whenever a http request occurs in one of these routes, i want to show the spinner to user. I know this has been a bad question , but i am new to angular 2 and i would realy be grateful if anyone could help me with that. <br>
  Thanks alot!<br> Edit!:
  <br>
  Solution with Günther's answer:
  I wrapped my <code>http</code> and <code>spinner-service</code> into a <code>HttpClient</code> component and used it instead of regular http module. Here is my <code>HttpClient</code> component:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import { SpinnerService} from './spinner-service';
  
  @Injectable()
  export class HttpClient {
    constructor(
        private http: Http,
        public spinner: SpinnerService
      ){
  
    }
  
    createAuthorizationHeader(headers:Headers) {
      headers.append('Authorization', 'Basic ' + btoa('username:password')); 
    }
  
    get(url) {
      this.spinner.start();
      let headers = new Headers();
      this.createAuthorizationHeader(headers);
      return this.http.get(url, { headers: headers }).do(data=&gt; {this.spinner.stop()});
    }
  
    post(url, data) {
      this.spinner.start();
      let headers = new Headers();
      this.createAuthorizationHeader(headers);
      return this.http.post(url, data, { headers: headers }).do(data=&gt; {this.spinner.stop()});
    }
  }
  </code></pre>