What are Angular interceptors and how do they work?

What are Angular interceptors and how do they work?

Angular interceptors are a powerful feature that allows you to intercept and modify HTTP requests and responses. They can be used for tasks like adding authentication tokens, logging requests, or handling errors globally.

Can you give me an example of how to implement an interceptor?

Sure! You can create an interceptor by implementing the HttpInterceptor interface and defining the intercept method. Here's a simple example:

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

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

How do I register the interceptor in my Angular app?

You can register the interceptor in your app module by providing it in the providers array. Here's how:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

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

What are some common use cases for interceptors?

Common use cases for interceptors include adding authentication tokens, logging HTTP requests and responses, handling errors globally, and modifying request headers.