What are interceptors in Angular and how do they work?

What are interceptors in Angular and how do they work?

Interceptors in Angular 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 create an interceptor?

Sure! To create an interceptor, you need to implement the HttpInterceptor interface and define 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 MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = req.clone({ headers: req.headers.set('Authorization', 'Bearer your-token') });
    return next.handle(clonedRequest);
  }
}

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 { MyInterceptor } from './my-interceptor';

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

What are some common use cases for interceptors?

Common use cases for interceptors include adding authentication tokens to requests, logging HTTP activity, handling errors globally, and modifying request/response data.