Angular Interceptors

In this tutorial, you will learn about Angular interceptors.

An Angular Interceptor is used to modify HTTP requests and responses globally.

Note: Angular supports multiple interceptors.

What is the use of Angular Interceptors?

There are lots of uses of Angular Interceptors

1. Angular Interceptors are used for HTTP requests and responses.

2. Angular Interceptors are used for handling errors globally.

3. Angular Interceptors are used to modify request headers.

4. Angular Interceptors are used to add authentication tokens.

Creating an Angular Interceptor

1. Generate Interceptor

You can generate an Interceptor from the command below

ng generate interceptor auth

2. Implement HttpInterceptor

Now, you will implement HttpInterceptor through below command.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    const token = 'my-auth-token';

    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    return next.handle(authReq);
  }
}

}

3. Register Interceptor

Now, you will register AuthInterceptor

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }
]

Note: multi: true is mandatory, otherwise Angular will override other interceptors.

Interceptor vs Service

Angular Interceptors – Interview Questions