How do I use HTTP interceptors in Angular?

How do I use HTTP interceptors in Angular?

HTTP interceptors in Angular allow you to intercept and modify HTTP requests and responses. You can create an interceptor by implementing the HttpInterceptor interface.

Can you show me a simple example of an HTTP interceptor?

Sure! Here's a basic 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 my-token')
    });
    return next.handle(clonedRequest);
  }
}

How do I register the interceptor in my Angular module?

You can register the interceptor in your Angular module by providing it in the providers array:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor';

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