Angular Interceptors Tutorial 🎯

Welcome back to CodeYourCraft! Today, we're diving into the world of Angular Interceptors. Interceptors are a powerful tool that allows you to intercept HTTP requests and responses in Angular applications. Let's get started!

What are Angular Interceptors? 📝

Interceptors are service providers that can intercept HTTP requests and responses. They can be used to modify or transform outgoing requests, or to process incoming responses before they are handled by the component that made the request.

Why use Angular Interceptors? 💡

Interceptors are useful for various purposes, such as:

Adding authorization headers to every outgoing request.
Logging requests and responses for debugging.
Modifying requests based on certain conditions.
Intercepting and handling errors globally.

Creating an Interceptor 🎨

To create an interceptor, follow these steps:

Import HttpInterceptor from @angular/common/http.
Create a new class that implements HttpInterceptor.
Implement the intercept method, which will be called for every outgoing request.
Inject HttpRequest and HttpHandler into the constructor.

Here's a simple example of an interceptor that logs every outgoing request:

typescript

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    console.log('Outgoing request:', request);

    return next.handle(request).do(
      (event: HttpEvent<any>) => {
        console.log('Incoming response:', event);
      },
      (error: any) => {
        console.error('Error:', error);
      }
    );
  }
}

Using the Interceptor 🔧

To use the interceptor, you need to:

Import the interceptor in your AppModule's providers array.
Configure the interceptor in your HttpClientModule's providers array.

Here's how you can do it:

typescript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoggingInterceptor } from './logging.interceptor';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Quiz 📝

That's it for today! In the next lesson, we'll dive deeper into Angular Interceptors and see how we can use them to add authorization headers to our requests.

Happy coding! 💻🚀