Angular 8 - showing a loading spinner only within the component

Question

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.

I have implemented ng-http-loader 6.0.1, 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.

If not, what would be the best way? Hardcode the spinner and when the http request returns the result, replace the spinner with the results? I think there must be a better way of doing this.

Example http call which is using @angular/common/http HttpClient:

private startHttpRequest = () => {
this.http.get('/TestUrl/')
  .subscribe(res => {
    console.log(res);
  });

}

I am using SignalR to display and update the results

Solution 1

Here is an easy method to achieve the component level spinner:

1. Create a small component called 'Spinner'.

2. Include spinner inside the components that make web service requests

3. Control the visibility of the Spinner component using ng-hide or ng-show

Solution 2

You can use the progress from material:

https://material.angular.io/components/progress-spinner/overview https://material.angular.io/components/progress-bar/overview

with your own css styles in app.component:

 <div class="loading-overlay" *ngIf="loading">
  <mat-progress-bar mode="indeterminate" value="40" color="accent"></mat-progress-bar>
</div>

by default, the material progress don't overlay the page, you need to create a css class if you want to