title: Angular 2 API service to display error UI message
body: <p>I'm new to Angular 2, so excuse me if the question is silly. </p>
  
  <p>I have to fetch data from the server and display it in the component. The server has some API methods, so I've created the <code>api.service.ts</code> which looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  const protocol = 'http';
  const domain = 'mydomain.ng';
  const port = ':4200';
  
  @Injectable()
  export class ApiService {
  
    constructor(private http: HttpClient) { }
  
    buildQuery(apiMethod: string) {
      return `${protocol}://${domain}${port}/${apiMethod}`;
    }
  
    get(apiMethod: string): Observable&lt;Response&gt; {
  
      const query = this.buildQuery(apiMethod);
  
      return this.http.get&lt;Response&gt;(query)
      .map(
        resp =&gt; {
          if (resp.ok) {
            return resp;
          } else { // Server returned an error
            // here I need to show UI error in the component
          }
        }
      )
      .catch( // Error is on the client side
        err =&gt; {
          // here I need to show UI error in the component
        }
      );
    }
  
    getGeneralReport(): Observable&lt;Response&gt; {
      return this.get('generalReport');
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Server API has a lot of methods, so the <code>get()</code> method is designed to perform the actual request and handle common mistakes. Then I will have methods like <code>getGeneralReport()</code> which will call the get method with the parameter specifying which API method should be used. </p>
  
  <p>Also I have a component called <code>general.component.ts</code> where the <code>api.service</code> is injected:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { ApiService } from '../../shared/api/api.service';
  
  @Component({
    selector: 'app-general',
    templateUrl: './general.component.html',
    styleUrls: ['./general.component.scss']
  })
  export class GeneralComponent implements OnInit {
  
    generalInfo: Response;
  
    constructor(private apiService: ApiService) { }
  
    ngOnInit() {
      this.apiService.getGeneralReport().subscribe(
        data =&gt; {
          this.generalInfo = data;
          // Display the received data
        }
      );
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>There will be more components like <code>general.component</code> which will use the <code>api.service</code>. Now I'm stuck because I need to pop up the UI window in all the components which use <code>api.service</code> if the error occurs in <code>api.service</code>. Is it possible or should I use some different approach?</p>