title: Angular 4 HttpInterceptor : show and hide loader
body: <p>I have implemented the <a href="https://angular.io/guide/http#advanced-usage" rel="nofollow noreferrer">HttpInterceptor</a> interface in order to intercept the outgoing requests and the incoming responses. </p>
  
  <p>I want to show a loader when a request is created and hide that loader when a response is received.</p>
  
  <p>Although the code bellow works when a HttpResponse is detected, but it does not detect a Http Failure (when the response code is different than 200), therefore, the loader will not be hidden.</p>
  
  <pre><code>@Injectable()
  export class AuthInterceptor implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  
  intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      this.loaderService.show();
  
      return next
          .handle(req)
          .do(event =&gt; {
              //nothing is printed when a Http failure occurs
              console.log('detecting event ', event);
              if (event instanceof HttpResponse) {
                  console.log('detecting http response');
                  this.loaderService.hide();
              }
          });
    }
  }
  </code></pre>