How to Show spinner for every HTTP requests in angular 5?

angular angular-http angular-http-interceptors angular-httpclient
Harish picture Harish · Apr 30, 2018 · Viewed 23.3k times · Source

i am new to angular 5 . How to code a common function to show spinner for every HTTP request in angular 5.Please help me to implement this.

Answer

Mehdi Benmoha picture Mehdi Benmoha · Apr 30, 2018

You can use Angular HttpInterceptor to show a spinner for all your requests, Here's a good medium article on how to implement an http interceptor

Also, you will have to create a spinner service/module and inject it in your http interceptor. Finally, in your intercept method you can use the finally rxJs method to stop your spinner. Here's a simple implementation:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinnerService.start();
    return next.handle(req).finally(res => this.spinnerService.stop() );
}

Enjoy!

Bonus: Here's a spinner service implementation example

Related questions

How to handle unauthorized requests(status with 401 or 403) with new httpClient in angular 4.3

I have an auth-interceptor.service.ts to handle the requests import {Injectable} from '@angular/core'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import {Observable} from 'rxjs/Observable'; import {Cookie} from './cookie.service'; import {Router} …

Read More
Overload request headers and params with HttpClient get

In HttpClientModule, is there a method to pass headers and params to get request. import { HttpHeaders, HttpParams, HttpClient } from @angular/common/http'; const headers = { headers: new HttpHeaders({}) } let params = new HttpParams({ }); get(url, {params}) // http client get with params get(…

Read More
How to add HttpClient Interceptors conditionally in Angular

Recently I have been using Interceptors with Angular HttpClient. I add headers corresponding to some HTTP GET methods and for some I do not need those headers. How can I tell my interceptor to conditionally add interceptors to only those …

Read More