title: Show a loading gif for each http request Angular 4
body: <p>I'm quite new with Angular so what I need is to show a <code>spinner</code> each time when a http request is done.</p>
  
  <p>I have many components:</p>
  
  <pre><code>&lt;component-one&gt;&lt;/component-one&gt;
  &lt;component-two&gt;&lt;/component-two&gt;
  &lt;component-three&gt;&lt;/component-three&gt;
  &lt;component-n&gt;&lt;/component-n&gt;
  </code></pre>
  
  <p>Each one has a http request that get or save some data so when the http request is made I want to show my <code>&lt;loading&gt;&lt;/loading&gt;</code> component so I suppose is not a good practice injecting my loading component in each other component with a http request. Can I add a filter or something from angular that allows me to load the <code>&lt;loading&gt;</code> component automatically in each component that has an http request?  </p>
  
  <p>Also when the http request is done I want to show a message like "Done" or someting.</p>
  
  <p>If anyone can provide me a solution for that I'll really appreciate, ty.</p>