Angular 8 - showing a loading spinner only within the component [duplicate]

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

Gopinath · Accepted Answer · 2020-01-23 08:06:25Z

5

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

Create a small component called 'Spinner'.
Include spinner inside the components that make web service requests
Control the visibility of the Spinner component using ng-hide or ng-show

answered Jan 23, 2020 at 8:06

Gopinath

5,0051 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

breakingcode Over a year ago

how would this go if I am making api calls in parent component and passing this returned data using @Input properties.. and only make spinner available for child component for which the data has been fetched ?

cucuru · Accepted Answer · 2020-01-23 08:14:55Z

4

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

answered Jan 23, 2020 at 8:14

cucuru

3,75811 gold badges50 silver badges87 bronze badges

2 Comments

Sugafree Over a year ago

Thanks cucuru. I am going to use this spinner with the logic below

crooksey Over a year ago

Whilst this answer in theory works, the author never mentioned the use of material. And material is a massive library to implement for the save of solving the issue.

crooksey · Accepted Answer · 2020-01-23 08:09:55Z

A loading spinner is simply css, and most packages assume you want the whole screen covered. Your best best would be to create your own CSS for said spinner, then in your component you can do something like...

<div *ngIf="myLogic === true" class="mycssspinner">
    <span class="spinner">Loading...</span>
</div>

Then define mycsssponner inside your stylessheet. There are many examples of pure CSS spinners online (example from first google result). You can do this with a component, but this is the most lightweight, easily re-usable way to achieve what you want.

Collectives™ on Stack Overflow

Angular 8 - showing a loading spinner only within the component [duplicate]

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Related