title: Angular 8 - showing a loading spinner only within the component
body: <p>I am building a SPA where the homepage will include multiple components. I would like to have a loading spinner for each components, without an overlay and only showing within the component.</p>
  
  <p>I have implemented <code>ng-http-loader 6.0.1</code>, but it created an overlay and the spinner is shown over the whole page. I did not find any option which would force it stay within that specific component.</p>
  
  <p>If not, what would be the best way? Hardcode the spinner and when the <code>http</code> request returns the result, replace the spinner with the results? I think there must be a better way of doing this.</p>
  
  <p>Example <code>http</code> call which is using <code>@angular/common/http HttpClient</code>:</p>
  
  <pre><code>private startHttpRequest = () =&gt; {
  this.http.get('/TestUrl/')
    .subscribe(res =&gt; {
      console.log(res);
    });
  </code></pre>
  
  <p>}</p>
  
  <p>I am using <code>SignalR</code> to display and update the results</p>