How To Implement Interceptors in Angular
One of the fantastic features that Angular provides is the interceptors, but what does an Interceptor do, and can we implement multiple of them in our Angular project?
What is Interceptor?
We can use Interceptors to intercept the incoming and outgoing HTTP requests and manipulate them using Angular HttpClient.
One of the most use cases for adding an interceptor to our Angular application is adding the token to the header of outgoing HTTP requests.
Let’s implement an interceptor in our Angular application!
We need to import HTTP_INTERCEPTORS from @angular/common/http in our app.module to make sure this will work for all of our requests. Then we should provide that in our providers . We should also import our interceptor and module and set the value ofuseClass to it.
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Interceptor } from './interceptor';
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi:true},
]
})After providing HTTP_INTERCEPTORS we need to inform the class we are going to implement our interceptor by using useClass.
Setting multi to true, makes sure that you can have multiple interceptors in your project.
Now we create interceptor.ts in /src/app and since interceptors are services we need to use @Injectable() decorator in our file:
Keep in mind that Interceptors are Services.
After every single HTTP request, the Interceptor calls the intercept() method. In Intercept() method, we clone the HttpRequest we are going to send and add the token to its HttpHeaders, and once it’s done, we call next.handle to return manipulated requests to the application.
Adding the second interceptor
It would be nice to have a loading component wrapper for the whole project, and once the requests from the server resolve, we can remove the loading from the layout of the project.
First, we need to create loadingInterceptor.ts file like below:
We will cover the LoadingService later, but for now, let’s check the loadingInterceptor first. We are creating a Subscription and then after every HTTP request is handled and finalized, we are unsubscribing spinnerSubscription which we are going to use in out loadingService for indicating a spinner loading.
Now let’s take a look at loadingService.ts
We can add and remove an overlay with a spinner component (line 22) in our Angular application with the above service until the subscription has not been unsubscribed. The loadingComponent can be anything you want, a GIF, a spinner, or a progress bar. I have set this to be a mat-progress-bar like this:
<mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>Do not forget to import the second interceptor in your app.module.ts file:
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: Interceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi:true }
]Important note: The order of providing interceptors does matter. For example if you provide three interceptors called A, B, C in that order, as the Angular Docs say: “…requests flow in A->B->C and responses flow out C->B->A.”
