How do I use HTTP client interceptors in Angular CLI?

How do I use HTTP client interceptors in Angular CLI?

You can use HTTP client interceptors in Angular CLI to intercept and modify HTTP requests and responses. First, create an interceptor by implementing the HttpInterceptor interface.

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

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

How do I register the interceptor in my Angular module?

You can register the interceptor in your app 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 {}

What are some common use cases for HTTP interceptors?

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