📄 Angular Interceptors: Headers Interceptor

#angular #interceptor

A headers interceptor can be used to add custom headers to outgoing HTTP requests. This is often used to set headers like ‘Content-Type’ or include API keys.

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

@Injectable()
export class HeadersInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler) {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'X-API-Key': 'your-api-key',
    });
    const headersRequest = request.clone({ headers });
    return next.handle(headersRequest);
  }
}

📄 Angular Pipes: Phone Number Formatter Pipe

#angular #pipe

Formats a raw string of numbers into a well-structured phone number format (e.g., (555) 555–5555).

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'phoneNumberFormatter' })
export class PNFPipe implements PipeTransform {
  transform(value: string): string {
    if (!value || value.length !== 10) return value;
    return `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6)}`;
  }
}

Usage in an Angular template:

<p>{{ '1234567890' | phoneNumberFormatter }}</p>
<!-- Output: "(123) 456-7890" -->

📄 Angular Interceptors: Loading Indicator Interceptor

#angular #interceptor

A loading indicator interceptor can be used to show and hide loading spinners or progress bars during HTTP requests, providing a better user experience.

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
} from '@angular/common/http';
import { LoadingService } from './loading.service';
import { finalize } from 'rxjs/operators';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(
    private loadingService: LoadingService
  ) {}

  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    this.loadingService.showLoading();
    return next.handle(request).pipe(
      finalize(() => {
        this.loadingService.hideLoading();
      })
    );
  }
}

📄 Angular Pipes: File Size Pipe

#angular #pipe

Converts a file size in bytes to a more human-readable format, such as KB, MB, or GB.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'fileSize' })
export class FileSizePipe implements PipeTransform {
  transform(bytes: number): string {
    if (isNaN(bytes) || bytes === 0) return '0 Bytes';

    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(
       Math.log(bytes) / Math.log(1024)
    );
    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
  }
}

Usage in an Angular template:

<p>{{ 1024 | fileSize }}</p>
<!-- Output: "1 KB" -->

📄 Angular Interceptors: Timeout Interceptor

#angular #interceptor

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);
      })
    );
  }
}

📄 Angular Interceptors: Base URL Interceptor

#angular #interceptor

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);
  }
}

📄 Angular Custom Directives: Autofocus Directive

#angular #directive

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();
  }
}

📄 Angular Interceptors: Retry Interceptor

#angular #interceptor

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));
  }
}

📄 Angular Interceptors: Offline Mode Interceptor

#angular #interceptor

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);
  }
}

📄 Angular Interceptors: JWT Refresh Token Interceptor

#angular #interceptor

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);
      })
    );
  }
}

📄 Angular Interceptors: Request Timing Interceptor

#angular #interceptor

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);
        })
      );
  }
}

📄 Angular Interceptors: Localization Interceptor

#angular #interceptor

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);
  }
}

📄 Angular Custom Directives: Click Outside Directive

#angular #directive

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();
    }
  }
}