How To Implement Spinner Interceptor For Every HTTP Request In Angular Application

Introduction

Nowadays we implement ngx-spinner but every time we show and hide spinner in API call so that is not a valid solution. So in this article, we will learn about how to implement SpinnerInterceptor call for every HTTP request showing spinner while calling API.

We can better understand this step by step.

Step 1

First thing we install ngx-spinner by following command,

npm i ngx-spinner

Step 2

Now add two module NgxSpinnerModule and BrowserAnimationsModule into import section (app.module.ts file) 

imports: [BrowserAnimationsModule,NgxSpinnerModule,
NgxSpinnerModule.forRoot({ type: 'ball-spin-clockwise-fade' })]

Now error like can not find 'NgxSpinnerModule' is resolved by import module like,

import { NgxSpinnerModule } from 'ngx-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Step 3

Add spinner into app.component.html,

<ngx-spinner bdColor="rgba(0,0,0,0.2)" size="large" color="#006575" type="ball-spin-clockwise-fade">
</ngx-spinner>

Step 4

Now add SpinnerInterceptor file and add below code,

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpEvent, HttpResponse, HttpHandler } from "@angular/common/http";
import { NgxSpinnerService } from "ngx-spinner";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";
import { Time } from '@angular/common';

const bodyScrollClass: string = "loaderBodyScrollFix";
@Injectable({
    providedIn: 'root'
})
export class SpinnerInterceptor implements HttpInterceptor {
    private renderer: Renderer2;
    constructor(private spinner: NgxSpinnerService, private rendererFactory: RendererFactory2) {
        this.renderer = rendererFactory.createRenderer(null, null);
    }
    intercept(req: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
        const start = performance.now();
        this.showLoader();
        return next.handle(req).pipe(tap(async (event: HttpEvent < any > ) => {
                if (event instanceof HttpResponse) {
                    this.onEnd();
                }
            },
            (err: any) => {
                this.onEnd();
            }));
    }
    private onEnd(): void {
        this.hideLoader();
    }
    private showLoader(): void {
        this.spinner.show();
    }
    private hideLoader(): void {
        this.spinner.hide();
    }
}

Step 5

Now you have already implemented Interceptor in your project. Shows 2 files in Interceptor folder one is auth-interceptor.ts and the second is interceptor-providers.ts. In interceptor-providers.ts file add SpinnerInterceptor like,

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth-interceptor';
import { SpinnerInterceptor } from './spinner.interseptor'; // add SpinnerInterceptor

/** Http interceptor providers in outside-in order */
export const InterceptorProviders = [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: SpinnerInterceptor, multi: true }, // SpinnerInterceptor
];

Step 6

Inside ngx-spinner node module so many animation CSS file are available. As per your requirement import CSS in angular.json file inside the style section.

"styles": [
    "node_modules/ngx-spinner/animations/ball-spin-clockwise-fade.css"
]

Step 7

Now see the output 

Conclusion

Spinner is required for every application so this article is very helpful for showing spinner for every HTTP call.

Enjoy Coding !!!!

We have got the response. Fantastic! 

Thank you for reading my article. Please leave your comments in the comment box below.