title: Angular 5 | Rendering progress bar using HttpInterceptor
body: <p>I am trying to add a <a href="https://material.angular.io/components/progress-bar/overview#indeterminate" rel="nofollow noreferrer">material progress-bar</a> in my Angular 5 application using a HttpInterceptor. </p>
  
  <p>Whenever there are any outstanding XHR requests, the progress bar should be visible and should be hidden/removed when there are no pending XHR requests.</p>
  
  <p>Here is my <code>HttpInterceptor</code> implementation that keeps track of pending request count :-</p>
  
  <pre><code>import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
  import {Injectable} from '@angular/core';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/observable/interval';
  import 'rxjs/add/operator/publish';
  
  @Injectable()
  export class ProgressBatHttpInterceptorService implements HttpInterceptor {
    obs: Observable&lt;number&gt;; // PROBLEM: How to expose this as hot Obeservable ?
    private count = 0;
  
    constructor() {
      this.obs = Observable
        .create(observer =&gt; observer.next(this.count))
        .publish();
    }
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      this.count++;   // increment the count here
      const observable = next.handle(req);
      observable.subscribe(() =&gt; {
      }, () =&gt; {
      }, () =&gt; {
        --this.count; // decrements the count.
      });
      return observable;
    }
  }
  </code></pre>
  
  <p><strong>AppComponent</strong> :-</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {ProgressBatHttpInterceptorService} from './progress-bat-http-interceptor.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor(progress: ProgressBatHttpInterceptorService) {
      const obs = progress.obs;
      obs.subscribe(function (n) { // This never gets invoked.
        console.log(n);
      });
    }
  }
  </code></pre>
  
  <p>The <code>ProgressBatHttpInterceptorService</code> is injected into <code>AppComponent</code>. In <code>AppComponent</code> constructor I am trying to subscribe to the count observable created in <code>ProgressBatHttpInterceptorService</code>.</p>
  
  <p>I am planning to use the count Observable to conditionally show hide the progress bar.</p>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>The .subscribe doesn't prints anything to console.</p>
  
  <p>What's the correct way to create a hot observable for keeping track of outstanding request count ?</p>