title: Angular: Error handling - Interceptors and modals
body: <p>I have built an Angular 5 application which is handling errors on every single call i make. Using the HttpClient i am able to intercept the error that happens after a request to the server has been sent. The error is intercepted on a service method that send the request to the API and then when an error happens it is pushed across to the component in order to display a nice modal with the error message.</p>
  
  <p>I am want to use interceptors to achieve the same behaviour in order to handle all errors on one single centralised way. But I am not sure if it is possible to communicate with the component from the interceptor class, send the message to it, so it can trigger the modal as it is currently doing,
  or How can I trigger the modal directly from the interceptor class.</p>
  
  <p>This is my current logic:</p>
  
  <p>The component:</p>
  
  <pre><code>  ....
   export class VerificationComponent implements OnInit {
    //Use to call the modal when errors happen
    @ViewChild('modalError') displayErrorRef: ModalComponent; 
  
  //Method send a request to the api using a service instance _myService
  getNextRecord() {
  
      this.errorMesage = "";
      this._myService.getCandidate()
          .subscribe(candidate =&gt; {
              this.loadCandidate = candidate;
              this.userName = this.appService.getUser();
          }, error =&gt; {                
              this.errorMesage = &lt;any&gt;error.errorMessage;                
              this.displayErrorRef.show();
          });
     }
  
  }
  ....
  </code></pre>
  
  <p>The service:</p>
  
  <pre><code>.....
  @Injectable()
  
  export class MyService {
  
    getCandidate(): Observable&lt;ICandidate&gt; {
      return this._http.get(this._getCandidateUrl, this.jwt())
          .map((response: Response) =&gt; &lt;ICandidate&gt;response.json())            
          .catch(this.handleError);
     }
  
  
  private handleError(error: Response) {        
      if (error.text())
          return Observable.throw({errorMessage:error.text(),erroStatus: error.status });
      else
          return Observable.throw('You are not authorised to get this resource');
      }
  }
  ....
  </code></pre>
  
  <p>The template:</p>
  
  <pre><code> &lt;!-- This is a child component to display the error message on the top of 
   this template --&gt;
    .....
  &lt;app-modal #modalError&gt;
  &lt;div class="app-modal-header"&gt;
      Error
  &lt;/div&gt;
  &lt;div class="app-modal-body"&gt;
      {{errorMesage}}
  &lt;/div&gt;
  &lt;div class="app-modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" (click)="hideModalError()"&gt;Logout&lt;/button&gt;
      &lt;button type="button" class="btn btn-default"(click)="tryGetNextRecord()"&gt;Try Again&lt;/button&gt;
  &lt;/div&gt;
  &lt;/app-modal&gt;
  ....
  </code></pre>