A timeout interceptor can be used to set a maximum timeout for HTTP requests. It can be useful to prevent long-running requests from blocking your application.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { throwError, timer, Observable } from 'rxjs';
import { catchError, timeout } from 'rxjs/operators';

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ): Observable<any> {
    const timeoutDuration = 10000; // 10 seconds
    return next.handle(request).pipe(
      timeout(timeoutDuration),
      catchError((error) => {
        if (error.name === 'TimeoutError') {
          // Handle timeout error here
          console.error(
           'Request timed out:', request.url
          );
          return throwError('Request timed out');
        }
        return throwError(error);
      })
    );
  }
}

A base URL interceptor can be used to prepend a base URL to all HTTP requests, simplifying the configuration of API endpoints.

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

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  private baseUrl = 'https://api.example.com';

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const apiRequest = request.clone({
      url: `${this.baseUrl}${request.url}`,
    });
    return next.handle(apiRequest);
  }
}

In this example, we apply the appAutofocus directive to an input element. When the page loads, this input field will automatically receive focus, making it convenient for the user to start typing immediately.

<input 
  type="text" 
  placeholder="Auto-focused input" 
  appAutofocus 
/>

import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

A retry interceptor can be used to automatically retry failed HTTP requests, which can be helpful in handling intermittent network issues.

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

@Injectable()
export class RetryInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    // Define the maximum number of retries
    const maxRetries = 3;

    return next.handle(request)
               .pipe(retry(maxRetries));
  }
}

An offline mode interceptor can be used to detect when the user’s device is offline and handle HTTP requests accordingly, such as storing them for later or showing a friendly message.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse,
} from '@angular/common/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class OfflineModeInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    if (!navigator.onLine) {
      console.error(
         'Device is offline. Request not sent:', 
         request.url
      );
      return throwError(
         new HttpErrorResponse({ 
           status: 0, 
           statusText: 'Offline' 
         })
      );
    }

    return next.handle(request);
  }
}

A JWT refresh token interceptor can be used to automatically refresh expired JSON Web Tokens (JWTs) and seamlessly continue making authenticated requests.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse,
} from '@angular/common/http';
import { AuthService } from './auth.service';
import { catchError, switchMap } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class JwtRefreshInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (
          error.status === 401 
         && error.error 
         && error.error.message === 'Token expired'
       ) {

          return this.authService.refreshToken().pipe(
            switchMap(() => {
              // Retry the original 
              // request with the new token
              const token = `Bearer ${
                this.authService.getAccessToken()
              }`;
              const updatedRequest = request.clone({
                setHeaders: { Authorization: token },
              });
              return next.handle(updatedRequest);
            }),
            catchError(() => {
              // Refresh token failed; 
              // log out the user or 
              // handle the error
              // For example, you can 
              // redirect to the login page
              this.authService.logout();
              const msg = 'Token refresh failed';
              return throwError(msg);
            })
          );
        }
        return throwError(error);
      })
    );
  }
}

A request timing interceptor can be used to measure and log the time taken for each HTTP request, helping you identify performance bottlenecks.

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

@Injectable()
export class RequestTimingInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const msg = `
      Request to ${request.url} took ${duration}ms
    `;
    const startTime = Date.now();
    return next.handle(request)
      .pipe(
        tap(() => {
          const endTime = Date.now();
          const duration = endTime - startTime;
          console.log(msg);
        })
      );
  }
}

A localization interceptor can be used to automatically include the user’s preferred language or locale in HTTP requests, ensuring that the server sends responses in the appropriate language.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { LocaleService } from './locale.service';

@Injectable()
export class LocalizationInterceptor implements HttpInterceptor {
  constructor(private localeService: LocaleService) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const userLocale = this.localeService.getUserLocale();
    const localizedRequest = request.clone({
      setHeaders: {
        'Accept-Language': userLocale,
      },
    });
    return next.handle(localizedRequest);
  }
}

Creating a custom directive in Angular to handle clicking outside a specific element, like a dropdown or modal, can enhance the user experience by allowing you to close these elements when users interact with the rest of the page. In this example, we’ll create a custom directive named appClickOutside to close a dropdown when users click outside of it.

<div 
  appClickOutside 
  (appClickOutside)="closeDropdown()"
>
  <button (click)="toggleDropdown()">
     Toggle Dropdown
  </button>
  <div 
    *ngIf="dropdownOpen" 
    class="dropdown"
  >
    Dropdown content
  </div>
</div>

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter<void>();

  constructor(private el: ElementRef) {}

  @HostListener('document:click', ['$event'])
  onClick(event: Event): void {
    const element = this.el.nativeElement;
    if (!element.contains(event.target)) {
      this.appClickOutside.emit();
    }
  }
}

A CSP interceptor can be used to automatically add Content Security Policy headers to outgoing HTTP requests to improve security.

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

@Injectable()
export class CspInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<any>, 
    next: HttpHandler
  ) {
    const cspHeader = "default-src 'self'; script-src 'self' 'unsafe-inline'";
    const cspRequest = request.clone({
      setHeaders: {
        'Content-Security-Policy': cspHeader,
      },
    });
    return next.handle(cspRequest);
  }
}