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

A compression interceptor can be used to automatically request compressed content (e.g., gzip) from the server, reducing the amount of data transferred over the network.

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

@Injectable()
export class CompressionInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<unknown>, 
    next: HttpHandler
  ) {
    const compressedRequest = request.clone({
      setHeaders: { 
        'Accept-Encoding': 'gzip, deflate' 
      },
    });
    return next.handle(compressedRequest);
  }
}

Creating a custom directive in Angular for implementing infinite scrolling can significantly improve the user experience, especially when dealing with long lists of data. In this example, we’ll create a custom directive named appInfiniteScroll to load additional content as the user scrolls down a page.

<div
   appInfiniteScroll 
   class="scrollable-content"
   (scrolled)="loadMoreData()"
>
  <!-- Your list of items -->
</div>

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

@Directive({
  selector: '[appInfiniteScroll]'
})
export class InfiniteScrollDirective {
  @Input() scrollThreshold = 100;
  @Output() scrolled = new EventEmitter<void>();

  constructor(private el: ElementRef) {}

  @HostListener('scroll', ['$event'])
  onScroll(event: Event): void {
    const {
       scrollHeight,
       scrollTop,
       clientHeight
    } = event.target as HTMLElement;
    const atBottom = scrollHeight - scrollTop <= clientHeight + this.scrollThreshold;

    if (atBottom) {
      this.scrolled.emit();
    }
  }
}