How to Create and Use Interceptors in Angular
Overview
Angular Interceptors are another important component of application development. They are used to alter HTTP requests by including various functions.
Interceptors are an excellent way to modify the HTTP request or response to make it more simple and understandable.
What Is An Angular HTTP Interceptor
An HTTP interceptor is an Angular service that intercepts HTTP requests and responses generated by the built-in HTTP client of the Angular framework.
By using an interceptor to change HTTP requests and answers in a single area, we may avoid redundant code and make our code more intelligible.
Angular Interceptor is built similarly to other services, but it must have an intercept function. You will always intercept the request and, if desired, follow it through to intercept the response.
How Does The Interceptor Work?
Assume we need to do some operation on each request sent through httpClient in the application.
For example, we must provide an auth token in each request so that the server can authenticate and deliver us the required answer. To do this, we will establish a service in between that will allow us to modify our httpRequest or httpResponse accordingly. The graphic below might help you better grasp the situation:
How To Create A Simple HTTP Interceptor
Angular interceptor can be created using the following command:
An angular interceptor will look the same as a service with @Injectable(), which implements HttpInterceptor, which has a method called intercept that allows you to intercept the HTTP request and response. Consider the following example:
Here, Angular gives a reference to the httpRequest object when the intercept() function is used. We can review and alter this request as required. When our logic is finished, we use next.handle and send the revised request back to the application.
We'll also have to update it into the @NgModule
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Operations of HTTP Interceptor
We can perform a wide range of actions using Angular interceptors. Let's take it one at a time:
Modify HTTP Headers
It is capable of modifying HTTP request header data.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Modifying The Request Body
The following steps can be taken to modify the request body:
We can modify the request body contained within httpRequest.
Set Authentication/Authorization Token
In a real-time scenario, it may be necessary to include an API key or a JSON token in the header to allow authentication.
Using httpRequest.clone, we may clone a request and then forward it once it has been modified. As in the example, we will include authorization in the request header.
Turn Learning into Career Growth
Modify The HTTP Response
The HTTP response can also be altered. If we want to transform XML data into JSON when it is received from the server, we may write the interceptor shown below:
Here, we may add handler and subscribe to the httpResponse using pipe, and then read whenever it receives the response.
Error Handling
Since the interceptor can handle both the request and the response, you may write standard code to handle the HTTP error that you received as a response.
Setting The New Headers
The following steps can be taken to add the new request header:
Cancel The Current Request
The following steps can be taken to cancel the current request:
Change The Requested URL
Manipulating the URL seems unsafe, but let's see how easy it is in an interceptor.
It's as simple as cloning the request and changing http:// with https://. The copied HTTPS request is then sent to the next handler.
This scenario may also be required if we need to add different API URLs for different development environments; this could be managed here.
Can We Have Multiple Interceptors?
Yes, you may declare many interceptors in the application, each with its own scope of action. For example, you may design one interceptor that is exclusively responsible for setting the authentication header, another for error handling, and so on.
To utilise several angular interceptors, use multi:true when registering in @NgModule.
Conclusion
We looked at interceptors in Angular in this article. We described what they are and how they operate. We created and delivered a number of interceptors to our application.
There are multiple real-time senarios where angular interceptors can be really useful:
- Modify HTTP headers
- Modifying the request body
- Set authentication/authorization token
- Modify the HTTP response
- Error handling
- Change the Requested URL
Also, we can have multiple interceptors in our application having different functionality.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more