AngularHow-ToBeginner · 4 min read

How to Create HTTP Interceptor in Angular: Simple Guide

In Angular, create an HTTP interceptor by implementing the HttpInterceptor interface in a service and registering it in the providers array with HTTP_INTERCEPTORS. This lets you modify HTTP requests or responses globally before they reach your components.

📐

Syntax

An HTTP interceptor in Angular is a service class that implements the HttpInterceptor interface. It must define the intercept(req, next) method, where you can modify the request or handle the response.

Register the interceptor in your module's providers array using HTTP_INTERCEPTORS with multi: true to allow multiple interceptors.

typescript

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Modify request here
    const modifiedReq = req.clone({
      // example: add headers
      setHeaders: { 'Authorization': 'Bearer token' }
    });
    return next.handle(modifiedReq);
  }
}

// In your module providers:
// providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }]

💻

Example

This example shows a simple HTTP interceptor that adds an Authorization header to every outgoing HTTP request.

typescript

import { Injectable, NgModule } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      setHeaders: { Authorization: 'Bearer my-secret-token' }
    });
    return next.handle(authReq);
  }
}

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

Output

All HTTP requests sent from Angular HttpClient will include the header: Authorization: Bearer my-secret-token

⚠️

Common Pitfalls

Forgetting to add multi: true when providing the interceptor causes Angular to overwrite other interceptors.
Not cloning the request before modifying it leads to errors because HttpRequest is immutable.
Not returning next.handle() or returning the wrong observable breaks the HTTP flow.

typescript

/* Wrong: modifying request directly without clone */
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  req.headers.set('Authorization', 'token'); // Error: headers are immutable
  return next.handle(req);
}

/* Right: clone request before modifying */
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const cloned = req.clone({ setHeaders: { Authorization: 'token' } });
  return next.handle(cloned);
}

📊

Quick Reference

Step	Description
Create service	Implement HttpInterceptor interface with intercept() method
Modify request	Use req.clone() to add headers or change request
Pass request	Return next.handle(modifiedRequest) to continue
Register interceptor	Add provider with HTTP_INTERCEPTORS and multi: true in module

✅

Key Takeaways

Always implement HttpInterceptor and its intercept() method to create an interceptor.

Use req.clone() to safely modify HTTP requests because they are immutable.

Return next.handle() with the modified request to continue the HTTP flow.

Interceptors let you add headers, log requests, or handle errors globally in Angular.