Design Patterns in Angular v20

1. Introduction

What are Design Patterns?

Design patterns are reusable solutions to common problems in software design. They are not direct code snippets but rather templates that can be applied in various situations. Think of them as blueprints for building robust, scalable, and maintainable software systems. They represent the best practices evolved over time by experienced software developers, providing a shared vocabulary and understanding among team members.

The importance of design patterns stems from their ability to:

• Improve maintainability: By providing structured solutions, patterns make code easier to understand and modify.
• Enhance scalability: Applications built with patterns can more easily grow and accommodate new features without significant refactoring.
• Promote reusability: Patterns often encapsulate logic in a way that allows components to be reused across different parts of an application or even different projects.
• Increase robustness: Well-applied patterns can help mitigate common pitfalls and vulnerabilities in software.
• Facilitate communication: A shared understanding of patterns allows developers to discuss design challenges and solutions more effectively.

Why Design Patterns in Angular?

Angular, a powerful framework for building complex single-page applications, presents unique architectural considerations that design patterns effectively address. Its component-based architecture, reactive programming paradigm with RxJS, and robust dependency injection system naturally align with many established design patterns.

Specific challenges in Angular development that design patterns help overcome include:

• Managing component communication: As applications grow, direct parent-child communication can become cumbersome. Patterns like Mediator or Observer can centralize or streamline this.
• Handling complex state: Large applications often struggle with state management. Patterns like State and Observer (with RxJS/Signals) are crucial.
• Ensuring code reusability: Preventing “copy-paste” code by encapsulating common logic.
• Decoupling concerns: Separating UI logic from business logic, data fetching, and state management.
• Improving testability: Loosely coupled components and services are inherently easier to test in isolation.
• Adapting to changing requirements: Patterns provide flexible structures that can be adapted more readily to new features or modifications.

Angular’s core concepts – components, services, modules, directives, and pipes – are themselves embodiments of various design patterns, making the framework naturally aligned with these principles.

Target Audience

This document is intended for Angular developers of all experience levels, from those just starting their journey to seasoned architects. It aims to provide practical guidance on how to leverage design patterns to build higher-quality Angular applications, focusing on the latest features and best practices introduced in Angular v20.

2. Core Angular Concepts as Patterns

Many fundamental Angular concepts inherently follow or are heavily influenced by classic design patterns. Understanding this connection helps in appreciating the framework’s design and in applying patterns effectively.

Component Pattern (Composite, Decorator-like aspects)

Angular Components embody aspects of several patterns:

• Composite: Components often form a tree-like structure, where a parent component can contain and manage child components. This mirrors the Composite pattern, allowing clients to treat individual objects and compositions of objects uniformly.
• Decorator-like aspects: While not a pure Decorator pattern, components can “decorate” the DOM with new behavior and visual elements. Directives, in particular, are explicit decorators of elements or components.

Service Pattern (Singleton, Dependency Injection)

Angular Services are a prime example of:

• Singleton: Services provided at the root level (providedIn: 'root') or a module level are typically singletons, meaning only one instance exists throughout the application or within a specific injector scope. This ensures a shared state and centralized logic.
• Dependency Injection: Angular’s robust DI system is fundamental to how services are provided and consumed. It promotes loose coupling by allowing classes to declare their dependencies rather than creating them, with the Angular injector handling the instantiation and provision.

Module Pattern (Encapsulation, Organization)

While standalone components are now the recommended default, NgModules historically fulfilled the role of:

• Encapsulation: Modules encapsulate components, directives, pipes, and services, defining a clear boundary for their responsibilities.
• Organization: They act as containers for related functionalities, helping organize large applications into manageable chunks. Even with standalone components, the concept of grouping related features (e.g., via folder structure or lazy-loaded routes) remains crucial, continuing the spirit of modular organization.

Directive Pattern (Decorator, extending behavior)

Angular Directives are a direct manifestation of the Decorator pattern.

• Decorator: Directives (especially attribute directives) allow you to attach new behavior to existing DOM elements or components without modifying their core structure. They “decorate” the element with additional responsibilities. For example, NgClass or NgStyle decorate an element with dynamic styling.

Pipes Pattern (Strategy, data transformation)

Angular Pipes align with the Strategy pattern.

• Strategy: Pipes define a family of algorithms (transformations) that can be interchanged. For example, the DatePipe, CurrencyPipe, or UpperCasePipe each encapsulate a specific data transformation strategy. You can apply different pipes to the same data, and the choice of pipe (strategy) can be changed dynamically in the template without altering the underlying data.

3. Creational Design Patterns in Angular

Creational patterns deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. In Angular, this often involves controlling the instantiation of services, components, or data models.

Singleton

• Definition: Ensures a class has only one instance and provides a global point of access to that instance.

• Problem: In Angular, you often need services that manage global state, handle application-wide logic (like authentication, logging, or API interactions), or share data across many components. Without the Singleton pattern, multiple instances of such services could lead to inconsistent state or inefficient resource usage.

• Angular Implementation: Angular’s Dependency Injection system inherently supports the Singleton pattern. By default, services provided at the root level (providedIn: 'root') are singletons within the entire application.

  // src/app/services/auth.service.ts
  import { Injectable, signal, Signal } from '@angular/core';
  
  interface User {
    id: string;
    name: string;
  }
  
  @Injectable({
    providedIn: 'root' // This makes AuthService a singleton
  })
  export class AuthService {
    private _currentUser = signal<User | null>(null);
  
    currentUser: Signal<User | null> = this._currentUser.asReadonly();
  
    constructor() {
      console.log('AuthService instance created (should only happen once)');
      // In a real app, load user from localStorage or check session
      const storedUser = localStorage.getItem('currentUser');
      if (storedUser) {
        this._currentUser.set(JSON.parse(storedUser));
      }
    }
  
    login(username: string, password: string): boolean {
      // Simulate API call
      if (username === 'test' && password === 'password') {
        const user: User = { id: '1', name: 'Test User' };
        this._currentUser.set(user);
        localStorage.setItem('currentUser', JSON.stringify(user));
        return true;
      }
      return false;
    }
  
    logout(): void {
      this._currentUser.set(null);
      localStorage.removeItem('currentUser');
    }
  
    isLoggedIn(): boolean {
      return this._currentUser() !== null;
    }
  }
  

  Any component or service injecting AuthService will receive the exact same instance:

  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { AuthService } from './services/auth.service';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
      <h1>Angular Singleton Example</h1>
      <div *ngIf="authService.isLoggedIn(); else loggedOut">
        Welcome, {{ authService.currentUser()?.name }}!
        <button (click)="authService.logout()">Logout</button>
      </div>
      <ng-template #loggedOut>
        <p>Please log in.</p>
        <button (click)="login()">Login</button>
      </ng-template>
    `
  })
  export class AppComponent {
    authService = inject(AuthService); // Angular injects the singleton instance
  
    login() {
      this.authService.login('test', 'password');
    }
  }
  

• Use Cases:

  • Global configuration services.
  • State management services (e.g., a central store for user data, shopping cart).
  • Logger services.
  • Utility services that manage application-wide resources (e.g., a WebSocket connection manager).

Factory Method

• Definition: Defines an interface for creating an object, but lets subclasses alter the type of objects that will be created. In Angular, this often involves creating different instances of components or services based on certain criteria.

• Problem: You need to create objects that share a common interface or base class, but the exact type of object to be instantiated depends on a runtime condition or configuration. Directly instantiating objects with new would lead to tightly coupled code.

• Angular Implementation: In Angular, you can implement Factory Method using a service that acts as the factory, returning different instances based on input. With standalone components, dynamic component creation is also relevant.

  // src/app/interfaces/notification.interface.ts
  export interface Notification {
    display(): void;
  }
  
  // src/app/models/success-notification.ts
  export class SuccessNotification implements Notification {
    constructor(private message: string) {}
    display(): void {
      console.log(`Success: ${this.message}`);
      // In a real app, show a green toast notification
    }
  }
  
  // src/app/models/error-notification.ts
  export class ErrorNotification implements Notification {
    constructor(private message: string) {}
    display(): void {
      console.error(`Error: ${this.message}`);
      // In a real app, show a red alert
    }
  }
  
  // src/app/services/notification-factory.service.ts
  import { Injectable } from '@angular/core';
  import { Notification, SuccessNotification, ErrorNotification } from '../interfaces/notification.interface';
  
  type NotificationType = 'success' | 'error';
  
  @Injectable({
    providedIn: 'root'
  })
  export class NotificationFactoryService {
    createNotification(type: NotificationType, message: string): Notification {
      switch (type) {
        case 'success':
          return new SuccessNotification(message);
        case 'error':
          return new ErrorNotification(message);
        default:
          throw new Error('Unknown notification type');
      }
    }
  }
  

  Usage in a component:

  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { NotificationFactoryService } from './services/notification-factory.service';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    // ... imports
    template: `
      <button (click)="showSuccess()">Show Success</button>
      <button (click)="showError()">Show Error</button>
    `
  })
  export class AppComponent {
    notificationFactory = inject(NotificationFactoryService);
  
    showSuccess() {
      const successNotif = this.notificationFactory.createNotification('success', 'Operation completed!');
      successNotif.display();
    }
  
    showError() {
      const errorNotif = this.notificationFactory.createNotification('error', 'Something went wrong!');
      errorNotif.display();
    }
  }
  

• Use Cases:

  • Creating different types of logging mechanisms (console, file, remote).
  • Generating various report types (PDF, Excel) based on user selection.
  • Instantiating different UI components (e.g., a dialog, a sidebar, a toast) dynamically based on context.
  • Handling multi-language content creation.

Abstract Factory

• Definition: Provides an interface for creating families of related or dependent objects without specifying their concrete classes.

• Problem: Your application needs to support multiple “families” of related objects, and you want to ensure that the objects created belong to the same family. For example, different UI themes (light/dark) might have different button, input, and card components, but you always want to use components from a consistent theme.

• Angular Implementation: This can be implemented using multiple factory services, each providing a different set of related objects, and then injecting the appropriate factory based on a configuration.

  // src/app/interfaces/ui-elements.interface.ts
  export interface Button { click(): void; render(): string; }
  export interface Input { typeText(text: string): void; render(): string; }
  
  // Light Theme Implementations
  export class LightButton implements Button { click(): void { console.log('Light Button Click!'); } render(): string { return '<button style="background-color: lightblue;">Light Button</button>'; } }
  export class LightInput implements Input { typeText(text: string): void { console.log(`Light Input: ${text}`); } render(): string { return '<input style="border: 1px solid lightgray;">'; } }
  
  // Dark Theme Implementations
  export class DarkButton implements Button { click(): void { console.log('Dark Button Click!'); } render(): string { return '<button style="background-color: darkblue; color: white;">Dark Button</button>'; } }
  export class DarkInput implements Input { typeText(text: string): void { console.log(`Dark Input: ${text}`); } render(): string { return '<input style="border: 1px solid darkgray; color: white; background-color: #333;">'; } }
  
  // src/app/factories/ui-factory.abstract.ts
  import { Button, Input } from '../interfaces/ui-elements.interface';
  
  export abstract class UiFactory {
    abstract createButton(): Button;
    abstract createInput(): Input;
  }
  
  // src/app/factories/light-ui.factory.ts
  import { Injectable } from '@angular/core';
  import { UiFactory } from './ui-factory.abstract';
  import { LightButton, LightInput } from '../interfaces/ui-elements.interface';
  
  @Injectable({ providedIn: 'root' }) // Or 'any' if scoped
  export class LightUiFactory extends UiFactory {
    createButton(): LightButton { return new LightButton(); }
    createInput(): LightInput { return new LightInput(); }
  }
  
  // src/app/factories/dark-ui.factory.ts
  import { Injectable } from '@angular/core';
  import { UiFactory } from './ui-factory.abstract';
  import { DarkButton, DarkInput } from '../interfaces/ui-elements.interface';
  
  @Injectable({ providedIn: 'root' }) // Or 'any' if scoped
  export class DarkUiFactory extends UiFactory {
    createButton(): DarkButton { return new DarkButton(); }
    createInput(): DarkInput { return new DarkInput(); }
  }
  
  // src/app/injection-tokens/ui-factory.token.ts
  import { InjectionToken } from '@angular/core';
  import { UiFactory } from '../factories/ui-factory.abstract';
  
  export const UI_FACTORY = new InjectionToken<UiFactory>('UI_FACTORY');
  
  // src/app/app.config.ts (or relevant NgModule providers array)
  import { ApplicationConfig, importProvidersFrom } from '@angular/core';
  import { provideRouter } from '@angular/router';
  import { routes } from './app.routes';
  import { provideHttpClient } from '@angular/common/http';
  import { UI_FACTORY } from './injection-tokens/ui-factory.token';
  import { LightUiFactory } from './factories/light-ui.factory';
  import { DarkUiFactory } from './factories/dark-ui.factory';
  
  // This could come from a user setting or feature flag
  const IS_DARK_THEME = true;
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes),
      provideHttpClient(),
      {
        provide: UI_FACTORY,
        useClass: IS_DARK_THEME ? DarkUiFactory : LightUiFactory
      }
    ]
  };
  
  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { UI_FACTORY } from './injection-tokens/ui-factory.token';
  import { Button, Input } from './interfaces/ui-elements.interface';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    template: `
      <h2>Abstract Factory Example ({{ themeName }})</h2>
      <div [innerHTML]="buttonHtml"></div>
      <div [innerHTML]="inputHtml"></div>
      <button (click)="onButtonClick()">Test Button Click</button>
      <button (click)="onInputType()">Test Input Type</button>
    `
  })
  export class AppComponent {
    private uiFactory = inject(UI_FACTORY);
    private button: Button;
    private input: Input;
  
    buttonHtml: string = '';
    inputHtml: string = '';
    themeName: string = IS_DARK_THEME ? 'Dark Theme' : 'Light Theme'; // From app.config.ts
  
    constructor() {
      this.button = this.uiFactory.createButton();
      this.input = this.uiFactory.createInput();
      this.buttonHtml = this.button.render();
      this.inputHtml = this.input.render();
    }
  
    onButtonClick() {
      this.button.click();
    }
  
    onInputType() {
      this.input.typeText('Hello World');
    }
  }
  

• Use Cases:

  • Supporting multiple UI themes (e.g., Material Design, Bootstrap, custom).
  • Providing different implementations for external integrations (e.g., different payment gateways, different analytics providers).
  • Creating platform-specific components (e.g., web, mobile, desktop variations).

Builder

• Definition: Constructs a complex object step by step. The same construction process can create different representations of the object.

• Problem: You need to create a complex object that has many optional parts or requires a specific construction order. A constructor with many parameters would be unreadable and error-prone.

• Angular Implementation: A service or a class can act as a builder to construct complex data models, forms, or dynamic components.

  // src/app/models/report.model.ts
  export class Report {
    title!: string;
    header?: string;
    content!: string[];
    footer?: string;
    sections: { name: string; text: string }[] = [];
  
    print(): void {
      console.log('--- Report ---');
      if (this.header) console.log(`Header: ${this.header}`);
      console.log(`Title: ${this.title}`);
      this.content.forEach(p => console.log(p));
      this.sections.forEach(s => console.log(`\nSection ${s.name}:\n${s.text}`));
      if (this.footer) console.log(`Footer: ${this.footer}`);
      console.log('--------------');
    }
  }
  
  // src/app/builders/report.builder.ts
  import { Report } from '../models/report.model';
  
  export class ReportBuilder {
    private report: Report;
  
    constructor() {
      this.report = new Report();
    }
  
    withTitle(title: string): ReportBuilder {
      this.report.title = title;
      return this;
    }
  
    withHeader(header: string): ReportBuilder {
      this.report.header = header;
      return this;
    }
  
    withContent(content: string[]): ReportBuilder {
      this.report.content = content;
      return this;
    }
  
    withFooter(footer: string): ReportBuilder {
      this.report.footer = footer;
      return this;
    }
  
    addSection(name: string, text: string): ReportBuilder {
      this.report.sections.push({ name, text });
      return this;
    }
  
    build(): Report {
      if (!this.report.title || !this.report.content?.length) {
        throw new Error('Report must have a title and content.');
      }
      return this.report;
    }
  }
  

  Usage in a component:

  // src/app/app.component.ts
  import { Component } from '@angular/core';
  import { ReportBuilder } from './builders/report.builder';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    template: `
      <button (click)="createSimpleReport()">Create Simple Report</button>
      <button (click)="createDetailedReport()">Create Detailed Report</button>
    `
  })
  export class AppComponent {
    createSimpleReport() {
      try {
        const simpleReport = new ReportBuilder()
          .withTitle('Monthly Summary')
          .withContent(['This is a summary of the month.', 'Key highlights included...'])
          .build();
        simpleReport.print();
      } catch (e: any) {
        console.error(e.message);
      }
    }
  
    createDetailedReport() {
      try {
        const detailedReport = new ReportBuilder()
          .withTitle('Annual Performance Review')
          .withHeader('Confidential')
          .withContent(['This report outlines the annual performance.'])
          .addSection('Financials', 'Detailed financial data is presented here.')
          .addSection('Operations', 'Operational improvements and challenges.')
          .withFooter('End of Report - © 2025')
          .build();
        detailedReport.print();
      } catch (e: any) {
        console.error(e.message);
      }
    }
  }
  

• Use Cases:

  • Constructing complex dynamic forms where fields and validations depend on various conditions.
  • Building query objects for API calls with numerous optional filters and sorting criteria.
  • Creating UI components (e.g., modals, notification banners) with varying configurations and content.
  • Generating reports or documents with configurable sections.

Prototype

• Definition: Creates new objects by copying an existing object (the prototype).

• Problem: You need to create new objects based on an existing instance, especially when object creation is expensive or when you need to avoid tight coupling between the client and the concrete classes being instantiated. While less common in Angular due to its reactive nature and preference for immutable data, it can be useful for mutable data structures or configuration objects.

• Angular Implementation: This typically involves implementing a clone() method on your data models or using utility functions to deep-copy objects.

  // src/app/models/user-settings.model.ts
  export class UserSettings {
    theme: string;
    notificationsEnabled: boolean;
    language: string;
  
    constructor(theme: string, notificationsEnabled: boolean, language: string) {
      this.theme = theme;
      this.notificationsEnabled = notificationsEnabled;
      this.language = language;
    }
  
    // The clone method
    clone(): UserSettings {
      // Deep copy properties if they are complex objects
      return new UserSettings(this.theme, this.notificationsEnabled, this.language);
    }
  
    display(): void {
      console.log(`Settings: Theme=${this.theme}, Notifications=${this.notificationsEnabled}, Language=${this.language}`);
    }
  }
  
  // src/app/app.component.ts
  import { Component } from '@angular/core';
  import { UserSettings } from './models/user-settings.model';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    template: `
      <button (click)="modifySettings()">Modify Settings</button>
    `
  })
  export class AppComponent {
    private defaultSettings = new UserSettings('light', true, 'en');
  
    constructor() {
      console.log('Default Settings:');
      this.defaultSettings.display();
    }
  
    modifySettings() {
      // Create a mutable copy using the prototype pattern
      const userSpecificSettings = this.defaultSettings.clone();
  
      userSpecificSettings.theme = 'dark';
      userSpecificSettings.notificationsEnabled = false;
      userSpecificSettings.display(); // Modified copy
  
      console.log('Original Settings after modification attempt:');
      this.defaultSettings.display(); // Original remains unchanged
    }
  }
  

• Use Cases:

  • When creating new instances of an object is expensive, and an existing object can serve as a template.
  • Managing mutable configuration objects where you need to create a new, modifiable version without affecting the original.
  • In scenarios where you need to support “undo” functionality for object state (less common directly, as Memento or Command patterns are often preferred).

4. Structural Design Patterns in Angular

Structural patterns deal with object composition, i.e., how objects are assembled to form larger structures. They focus on simplifying the relationships between entities.

Adapter

• Definition: Converts the interface of a class into another interface clients expect. Adapter lets classes work together that couldn’t otherwise because of incompatible interfaces.

• Problem: You need to integrate an external library, a legacy API, or a third-party service whose data structures or method signatures do not match Angular’s conventions or your application’s expected interfaces. Directly using it would require repetitive data mapping or awkward method calls.

• Angular Implementation: Implement an Angular service that acts as an adapter, translating calls and data between your application’s interface and the external one.

  // src/app/interfaces/user.interface.ts
  export interface User {
    id: string;
    fullName: string;
    emailAddress: string;
  }
  
  // External "Legacy" API User Model
  export interface LegacyUser {
    _id: string;
    first_name: string;
    last_name: string;
    contact_email: string;
    // ... other legacy fields
  }
  
  // src/app/services/legacy-api.service.ts (Simulated external API)
  import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { LegacyUser } from '../interfaces/user.interface';
  
  @Injectable({ providedIn: 'root' })
  export class LegacyApiService {
    getLegacyUser(id: string): Observable<LegacyUser> {
      // Simulate API call
      console.log(`Fetching legacy user with ID: ${id}`);
      return of({
        _id: id,
        first_name: 'John',
        last_name: 'Doe',
        contact_email: 'john.doe@example.com',
        // ...
      });
    }
  }
  
  // src/app/adapters/user.adapter.ts
  import { Injectable, inject } from '@angular/core';
  import { Observable, map } from 'rxjs';
  import { User, LegacyUser } from '../interfaces/user.interface';
  import { LegacyApiService } from '../services/legacy-api.service';
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserAdapter {
    private legacyApiService = inject(LegacyApiService);
  
    // Method to convert LegacyUser to User
    private adaptLegacyUser(legacyUser: LegacyUser): User {
      return {
        id: legacyUser._id,
        fullName: `${legacyUser.first_name} ${legacyUser.last_name}`,
        emailAddress: legacyUser.contact_email
      };
    }
  
    // Method to fetch and adapt
    getUser(id: string): Observable<User> {
      return this.legacyApiService.getLegacyUser(id).pipe(
        map(legacyUser => this.adaptLegacyUser(legacyUser))
      );
    }
  }
  

  Usage in a component:

  // src/app/app.component.ts
  import { Component, OnInit, inject } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { UserAdapter } from './adapters/user.adapter';
  import { User } from './interfaces/user.interface';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
      <h2>Adapter Pattern Example</h2>
      <div *ngIf="user$ | async as user">
        <p>ID: {{ user.id }}</p>
        <p>Name: {{ user.fullName }}</p>
        <p>Email: {{ user.emailAddress }}</p>
      </div>
    `
  })
  export class AppComponent implements OnInit {
    private userAdapter = inject(UserAdapter);
    user$!: Observable<User>;
  
    ngOnInit(): void {
      this.user$ = this.userAdapter.getUser('legacy-user-123');
    }
  }
  

• Use Cases:

  • Integrating third-party libraries or components into your Angular application.
  • Consuming legacy backend APIs with inconsistent naming or data structures.
  • Providing a consistent interface to multiple similar services (e.g., different payment providers, all adapted to a generic PaymentGateway interface).

Bridge

• Definition: Decouples an abstraction from its implementation so that the two can vary independently.

• Problem: You have both an abstraction (e.g., a generic UI component like a Button) and its implementation (e.g., how that button renders on different platforms or uses different CSS frameworks). If these are tightly coupled, changing one requires changing the other, leading to a proliferation of classes (e.g., MaterialButton, BootstrapButton).

• Angular Implementation: This can be seen in highly reusable UI component libraries where the component’s logic (abstraction) is separate from its rendering or underlying CSS framework integration (implementation). The component takes an “implementation” as an input or uses DI to inject it.

  // src/app/abstractions/dialog.abstraction.ts
  export abstract class AbstractDialog {
    protected constructor(protected implementation: DialogImplementation) {}
    abstract open(title: string, message: string): void;
    abstract close(): void;
  }
  
  // src/app/implementations/dialog.implementation.ts
  export abstract class DialogImplementation {
    abstract show(title: string, message: string): void;
    abstract hide(): void;
  }
  
  // src/app/implementations/material-dialog.implementation.ts
  // This would typically involve a third-party Material library
  import { Injectable } from '@angular/core';
  import { DialogImplementation } from './dialog.implementation';
  
  @Injectable({ providedIn: 'root' })
  export class MaterialDialogImplementation implements DialogImplementation {
    show(title: string, message: string): void {
      console.log(`[Material Dialog] Showing: ${title} - ${message}`);
      // Simulate opening a Material dialog
    }
    hide(): void {
      console.log('[Material Dialog] Hiding');
      // Simulate closing a Material dialog
    }
  }
  
  // src/app/implementations/bootstrap-dialog.implementation.ts
  // This would typically involve a third-party Bootstrap library
  import { Injectable } from '@angular/core';
  import { DialogImplementation } from './dialog.implementation';
  
  @Injectable({ providedIn: 'root' })
  export class BootstrapDialogImplementation implements DialogImplementation {
    show(title: string, message: string): void {
      console.log(`[Bootstrap Dialog] Showing: ${title} - ${message}`);
      // Simulate opening a Bootstrap modal
    }
    hide(): void {
      console.log('[Bootstrap Dialog] Hiding');
      // Simulate closing a Bootstrap modal
    }
  }
  
  // src/app/services/dialog.service.ts
  import { Injectable, inject, InjectionToken } from '@angular/core';
  import { DialogImplementation } from '../implementations/dialog.implementation';
  
  // Token to allow dynamic injection of different implementations
  export const DIALOG_IMPLEMENTATION = new InjectionToken<DialogImplementation>('DIALOG_IMPLEMENTATION');
  
  @Injectable({
    providedIn: 'root' // Provided by the root, but the actual implementation is configured in app.config.ts
  })
  export class DialogService {
    private implementation = inject(DIALOG_IMPLEMENTATION);
  
    open(title: string, message: string): void {
      this.implementation.show(title, message);
    }
  
    close(): void {
      this.implementation.hide();
    }
  }
  
  // src/app/app.config.ts (where you choose the implementation)
  import { ApplicationConfig } from '@angular/core';
  import { provideRouter } from '@angular/router';
  import { routes } from './app.routes';
  import { DIALOG_IMPLEMENTATION } from './services/dialog.service';
  import { MaterialDialogImplementation } from './implementations/material-dialog.implementation';
  import { BootstrapDialogImplementation } from './implementations/bootstrap-dialog.implementation';
  
  // Toggle this to switch implementations
  const USE_MATERIAL_DIALOG = true;
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes),
      {
        provide: DIALOG_IMPLEMENTATION,
        useClass: USE_MATERIAL_DIALOG ? MaterialDialogImplementation : BootstrapDialogImplementation
      }
    ]
  };
  
  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { DialogService } from './services/dialog.service';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    template: `
      <h2>Bridge Pattern Example</h2>
      <button (click)="openDialog()">Open Dialog</button>
      <button (click)="closeDialog()">Close Dialog</button>
    `
  })
  export class AppComponent {
    dialogService = inject(DialogService);
  
    openDialog() {
      this.dialogService.open('Welcome', 'This is a message from the dialog.');
    }
  
    closeDialog() {
      this.dialogService.close();
    }
  }
  

• Use Cases:

  • Building cross-platform components that share core logic but have different rendering engines (e.g., Angular for web, NativeScript/Ionic for mobile).
  • Creating a generic UI component library that can easily switch between different CSS frameworks (e.g., Material, Bootstrap, Ant Design) without rewriting the component logic.
  • Providing interchangeable data storage mechanisms (e.g., local storage, session storage, backend API) for a single data access layer.

Composite

• Definition: Composes objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.

• Problem: You need to work with objects that can be grouped into a tree-like structure, where both individual objects and groups of objects should be treated in the same way. A common example is a menu system with menu items and submenus, or a file system with files and folders.

• Angular Implementation: Components naturally lend themselves to the Composite pattern, especially when building nested UI elements like menus, file explorers, or organizational charts.

  // src/app/interfaces/menu-item.interface.ts
  export interface MenuItem {
    name: string;
    icon?: string;
    onClick(): void; // Can be empty for composite nodes
    children?: MenuItem[];
  }
  
  // src/app/components/menu-item/menu-item.component.ts
  import { Component, Input } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MenuItem } from '../../interfaces/menu-item.interface';
  
  @Component({
    selector: 'app-menu-item',
    standalone: true,
    imports: [CommonModule],
    template: `
      <li class="menu-item" (click)="item.onClick()">
        <span *ngIf="item.icon" class="icon">{{ item.icon }}</span>
        {{ item.name }}
        <ul *ngIf="item.children && item.children.length > 0" class="sub-menu">
          <ng-container *ngFor="let child of item.children">
            <app-menu-item [item]="child"></app-menu-item>
          </ng-container>
        </ul>
      </li>
    `,
    styles: [`
      .menu-item { cursor: pointer; padding: 5px; margin-left: 15px; }
      .menu-item:hover { background-color: #f0f0f0; }
      .sub-menu { list-style-type: none; padding-left: 10px; }
      .icon { margin-right: 5px; }
    `]
  })
  export class MenuItemComponent {
    @Input() item!: MenuItem;
  }
  
  // src/app/app.component.ts
  import { Component } from '@angular/core';
  import { MenuItemComponent } from './components/menu-item/menu-item.component';
  import { MenuItem } from './interfaces/menu-item.interface';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [MenuItemComponent],
    template: `
      <h2>Composite Pattern Example: Menu</h2>
      <ul class="main-menu">
        <ng-container *ngFor="let item of menuItems">
          <app-menu-item [item]="item"></app-menu-item>
        </ng-container>
      </ul>
    `,
    styles: [`
      .main-menu { list-style-type: none; padding: 0; }
    `]
  })
  export class AppComponent {
    menuItems: MenuItem[] = [
      {
        name: 'Dashboard',
        icon: '📊',
        onClick: () => console.log('Navigating to Dashboard')
      },
      {
        name: 'Products',
        icon: '📦',
        onClick: () => {}, // No direct action for parent
        children: [
          {
            name: 'View All Products',
            onClick: () => console.log('Navigating to All Products')
          },
          {
            name: 'Add New Product',
            onClick: () => console.log('Opening Add Product form')
          }
        ]
      },
      {
        name: 'Settings',
        icon: '⚙️',
        onClick: () => {}, // No direct action for parent
        children: [
          {
            name: 'User Profile',
            onClick: () => console.log('Navigating to User Profile')
          },
          {
            name: 'Security',
            onClick: () => console.log('Navigating to Security Settings')
          },
          {
            name: 'Preferences',
            onClick: () => {},
            children: [
              { name: 'Theme', onClick: () => console.log('Changing theme') },
              { name: 'Language', onClick: () => console.log('Changing language') }
            ]
          }
        ]
      },
      {
        name: 'Help',
        icon: '❓',
        onClick: () => console.log('Opening Help documentation')
      }
    ];
  }
  

• Use Cases:

  • Building hierarchical navigation menus, sitemaps, or breadcrumbs.
  • Representing file system structures or organizational charts in UI.
  • Creating reusable UI component hierarchies where parent components manage child components uniformly.
  • Any scenario where you have “parts” and “wholes” that clients should treat interchangeably.

Decorator

• Definition: Attaches additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.

• Problem: You want to add new features or behaviors to existing objects (components, services, or even RxJS observables) without altering their original code or creating a multitude of subclasses.

• Angular Implementation:

  • Directives: Angular directives are a primary mechanism for decorating DOM elements or components with additional behavior.
  • Higher-Order Components (HOCs) / Higher-Order Directives (HODs): While not a built-in Angular concept, you can create functions that take a component/directive and return a new one with enhanced capabilities.
  • RxJS Operators: These are powerful examples of the Decorator pattern applied to observables, adding functionality to streams.

  Example 1: Decorating a Component with a Directive

  // src/app/directives/tooltip.directive.ts
  import { Directive, ElementRef, HostListener, Input } from '@angular/core';
  
  @Directive({
    selector: '[appTooltip]', // Apply as an attribute
    standalone: true
  })
  export class TooltipDirective {
    @Input('appTooltip') tooltipText: string = '';
    private tooltipElement: HTMLElement | null = null;
  
    constructor(private el: ElementRef) {}
  
    @HostListener('mouseenter') onMouseEnter() {
      if (this.tooltipText) {
        this.createTooltip();
      }
    }
  
    @HostListener('mouseleave') onMouseLeave() {
      this.destroyTooltip();
    }
  
    private createTooltip() {
      this.tooltipElement = document.createElement('div');
      this.tooltipElement.innerText = this.tooltipText;
      this.tooltipElement.style.cssText = `
        position: absolute;
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 1000;
        white-space: nowrap;
      `;
      document.body.appendChild(this.tooltipElement);
      this.positionTooltip();
    }
  
    private positionTooltip() {
      if (this.tooltipElement) {
        const hostRect = this.el.nativeElement.getBoundingClientRect();
        this.tooltipElement.style.left = `${hostRect.left + window.scrollX + hostRect.width / 2 - this.tooltipElement.offsetWidth / 2}px`;
        this.tooltipElement.style.top = `${hostRect.top + window.scrollY - this.tooltipElement.offsetHeight - 5}px`;
      }
    }
  
    private destroyTooltip() {
      if (this.tooltipElement) {
        this.tooltipElement.remove();
        this.tooltipElement = null;
      }
    }
  }
  

  Usage in a component’s HTML:

  <!-- src/app/app.component.html -->
  <button appTooltip="This is a button tooltip">Hover over me</button>
  <p appTooltip="Detailed information for this paragraph.">Some text.</p>
  

  // src/app/app.component.ts
  import { Component } from '@angular/core';
  import { TooltipDirective } from './directives/tooltip.directive'; // Import the directive
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [TooltipDirective], // Make the directive available
    templateUrl: './app.component.html' // Assumes HTML above is in app.component.html
  })
  export class AppComponent {
    // ... component logic
  }
  

  Example 2: RxJS Operators (Implicit Decorator)

  // src/app/services/data.service.ts
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { map, retry, catchError } from 'rxjs/operators';
  import { of } from 'rxjs';
  
  interface Product { id: number; name: string; price: number; }
  
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
    constructor(private http: HttpClient) {}
  
    getProducts(): Observable<Product[]> {
      // Simulate an HTTP call
      return of([
        { id: 1, name: 'Laptop', price: 1200 },
        { id: 2, name: 'Mouse', price: 25 }
      ]).pipe(
        retry(2), // Decorates the observable with retry logic
        map(products => products.map(p => ({ ...p, price: p.price * 1.05 }))), // Decorates with price adjustment
        catchError(error => { // Decorates with error handling
          console.error('Error fetching products:', error);
          return of([]); // Return an empty array on error
        })
      );
    }
  }
  

• Use Cases:

  • Adding dynamic behavior (tooltips, drag-and-drop, debouncing) to existing elements or components using directives.
  • Enhancing observables with error handling, logging, transformation, or filtering using RxJS operators.
  • Creating reusable logging or analytics capabilities that can be “attached” to methods or classes.

Facade

• Definition: Provides a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use.

• Problem: Your application interacts with a complex subsystem (e.g., multiple backend APIs, intricate state management logic, or several third-party libraries). Directly calling methods on individual parts of this subsystem makes client code complex, tightly coupled, and hard to maintain.

• Angular Implementation: An Angular service can act as a facade, encapsulating the complexity of underlying services or interactions. This is very common in Angular, especially for data access layers.

  // src/app/services/product-api.service.ts (Lower-level service)
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  interface ProductApiResult {
    product_id: string;
    product_name: string;
    unit_price: number;
  }
  
  @Injectable({ providedIn: 'root' })
  export class ProductApiService {
    constructor(private http: HttpClient) {}
  
    getProductsApi(): Observable<ProductApiResult[]> {
      // Simulates fetching raw product data
      console.log('ProductApiService: Fetching products from API...');
      return of([
        { product_id: 'P001', product_name: 'Laptop', unit_price: 1200 },
        { product_id: 'P002', product_name: 'Keyboard', unit_price: 75 }
      ]);
    }
  
    // ... other product-related API calls (create, update, delete)
  }
  
  // src/app/services/inventory-api.service.ts (Another lower-level service)
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  
  interface InventoryItem {
    item_id: string;
    stock_count: number;
    warehouse_location: string;
  }
  
  @Injectable({ providedIn: 'root' })
  export class InventoryApiService {
    constructor(private http: HttpClient) {}
  
    getInventoryApi(productId: string): Observable<InventoryItem> {
      // Simulates fetching inventory data for a product
      console.log(`InventoryApiService: Fetching inventory for ${productId}...`);
      return of({
        item_id: productId,
        stock_count: productId === 'P001' ? 10 : 50,
        warehouse_location: 'A1'
      });
    }
  }
  
  // src/app/models/product.model.ts (Domain Model)
  export interface Product {
    id: string;
    name: string;
    price: number;
    stock: number;
  }
  
  // src/app/facades/shop.facade.ts (The Facade Service)
  import { Injectable, inject } from '@angular/core';
  import { Observable, forkJoin } from 'rxjs';
  import { map, switchMap } from 'rxjs/operators';
  import { ProductApiService } from '../services/product-api.service';
  import { InventoryApiService } from '../services/inventory-api.service';
  import { Product } from '../models/product.model';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ShopFacade {
    private productApi = inject(ProductApiService);
    private inventoryApi = inject(InventoryApiService);
  
    getProductsWithStock(): Observable<Product[]> {
      console.log('ShopFacade: Getting all products with stock information...');
      return this.productApi.getProductsApi().pipe(
        switchMap(productResults => {
          const productObservables = productResults.map(p =>
            this.inventoryApi.getInventoryApi(p.product_id).pipe(
              map(inventory => ({
                id: p.product_id,
                name: p.product_name,
                price: p.unit_price,
                stock: inventory.stock_count
              }))
            )
          );
          return forkJoin(productObservables); // Combine all product+inventory observables
        })
      );
    }
  
    // Add more high-level operations here, e.g., placeOrder()
  }
  

  Usage in a component:

  // src/app/app.component.ts
  import { Component, OnInit, inject } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ShopFacade } from './facades/shop.facade';
  import { Product } from './models/product.model';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
      <h2>Facade Pattern Example: Shop Products</h2>
      <ul *ngIf="products$ | async as products">
        <li *ngFor="let product of products">
          {{ product.name }} - ${{ product.price }} (Stock: {{ product.stock }})
        </li>
      </ul>
    `
  })
  export class AppComponent implements OnInit {
    private shopFacade = inject(ShopFacade);
    products$!: Observable<Product[]>;
  
    ngOnInit(): void {
      this.products$ = this.shopFacade.getProductsWithStock();
    }
  }
  

• Use Cases:

  • Simplifying complex API interactions by combining calls to multiple backend services into a single, cohesive interface.
  • Encapsulating complex state management logic (e.g., in NgRx effects or ngrx/data services) behind a simpler service.
  • Providing a simplified interface to a third-party library that has many classes and methods.
  • Creating a “business logic” layer that combines data from various sources and presents it in a unified way to the UI.

Flyweight

• Definition: Reduces the number of objects created to improve performance and memory usage. It does this by sharing common parts of state between multiple objects instead of keeping it in each object.

• Problem: Your application needs to display a large number of similar objects (e.g., list items, cells in a grid, particles in a simulation) where many objects share common data but have small unique parts. Creating a unique instance for each object consumes excessive memory and can impact performance.

• Angular Implementation: While not always a direct mapping, Angular’s change detection and rendering optimizations, especially with *ngFor and trackBy, or advanced techniques like virtual scrolling, can be considered forms of applying Flyweight principles by recycling or efficiently managing rendering of many similar elements. Explicit implementation involves a factory that reuses shared objects.

  // src/app/models/character.model.ts (The "Flyweight" - intrinsic state)
  export class CharacterStyle {
    constructor(
      public font: string,
      public color: string,
      public size: string
    ) {}
  
    // A simple cache for styles
    private static cache: Map<string, CharacterStyle> = new Map();
  
    static getStyle(font: string, color: string, size: string): CharacterStyle {
      const key = `${font}-${color}-${size}`;
      if (!CharacterStyle.cache.has(key)) {
        CharacterStyle.cache.set(key, new CharacterStyle(font, color, size));
      }
      return CharacterStyle.cache.get(key)!;
    }
  }
  
  // src/app/components/text-character/text-character.component.ts (The "Context" - extrinsic state)
  import { Component, Input, OnInit } from '@angular/core';
  import { CharacterStyle } from '../../models/character.model';
  
  @Component({
    selector: 'app-text-character',
    standalone: true,
    template: `
      <span [style.font-family]="characterStyle.font"
            [style.color]="characterStyle.color"
            [style.font-size]="characterStyle.size">
        {{ char }}
      </span>
    `
  })
  export class TextCharacterComponent implements OnInit {
    @Input() char!: string;
    @Input() styleProps!: { font: string; color: string; size: string }; // Extrinsic state
  
    characterStyle!: CharacterStyle;
  
    ngOnInit(): void {
      // The component uses the shared CharacterStyle instance
      this.characterStyle = CharacterStyle.getStyle(
        this.styleProps.font,
        this.styleProps.color,
        this.styleProps.size
      );
    }
  }
  
  // src/app/app.component.ts
  import { Component } from '@angular/core';
  import { TextCharacterComponent } from './components/text-character/text-character.component';
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, TextCharacterComponent],
    template: `
      <h2>Flyweight Pattern Example: Styled Text</h2>
      <div class="text-display">
        <ng-container *ngFor="let charConfig of textConfigs">
          <app-text-character
            [char]="charConfig.char"
            [styleProps]="charConfig.style"
          ></app-text-character>
        </ng-container>
      </div>
      <p>Check console for `CharacterStyle` instance creation logs.</p>
    `,
    styles: [`
      .text-display { display: flex; flex-wrap: wrap; border: 1px solid #ccc; padding: 10px; }
    `]
  })
  export class AppComponent {
    // Simulate text with varying styles.
    // Notice many characters share the same style properties (flyweights).
    textConfigs = [
      { char: 'H', style: { font: 'Arial', color: 'red', size: '20px' } },
      { char: 'e', style: { font: 'Arial', color: 'red', size: '20px' } },
      { char: 'l', style: { font: 'Arial', color: 'red', size: '20px' } },
      { char: 'l', style: { font: 'Arial', color: 'red', size: '20px' } },
      { char: 'o', style: { font: 'Arial', color: 'red', size: '20px' } },
      { char: ' ', style: { font: 'Arial', color: 'black', size: '16px' } },
      { char: 'W', style: { font: 'Verdana', color: 'blue', size: '18px' } },
      { char: 'o', style: { font: 'Verdana', color: 'blue', size: '18px' } },
      { char: 'r', style: { font: 'Verdana', color: 'blue', size: '18px' } },
      { char: 'l', style: { font: 'Verdana', color: 'blue', size: '18px' } },
      { char: 'd', style: { font: 'Verdana', color: 'blue', size: '18px' } },
      { char: '!', style: { font: 'Arial', color: 'red', size: '20px' } }
    ];
    // You'll see "CharacterStyle instance created" only a few times in console,
    // not for every character, demonstrating sharing.
  }
  

• Use Cases:

  • Virtual scrolling or large data grids where only a subset of items are rendered, and rendering components are recycled (e.g., Angular CDK Virtual Scroll).
  • Displaying large numbers of UI elements (e.g., icons, simple buttons) that share common visual styles and only differ in their content or position.
  • Managing resources like image caches where many objects might point to the same underlying image data.

Proxy

• Definition: Provides a surrogate or placeholder for another object to control access to it.

• Problem: You need to control access to an object, add behavior before or after its methods are called, or defer its instantiation until it’s actually needed (lazy loading). Directly accessing the object might bypass security checks, logging, or lead to unnecessary resource consumption.

• Angular Implementation:

  • Lazy Loading Modules/Components: Angular’s router lazy loading is a prime example, where modules or standalone components are only loaded when their route is activated.
  • HTTP Interceptors: These act as proxies for HttpClient requests, allowing you to intercept and modify requests/responses globally.
  • Creating a service that wraps another service to add logging, caching, or security.

  Example 1: Lazy Loading (Router’s Proxy) The router configuration demonstrates implicit Proxy pattern where loadComponent defers loading AdminDashboardComponent until the admin path is accessed.

  // src/app/app.routes.ts
  import { Routes } from '@angular/router';
  
  export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
      path: 'home',
      loadComponent: () => import('./components/home/home.component').then(m => m.HomeComponent)
    },
    {
      path: 'admin',
      // This is where the Proxy pattern is applied: AdminDashboardComponent is lazy-loaded
      loadComponent: () => import('./components/admin-dashboard/admin-dashboard.component').then(m => m.AdminDashboardComponent)
    },
    { path: '**', redirectTo: 'home' }
  ];
  

  // src/app/components/home/home.component.ts
  import { Component } from '@angular/core';
  import { RouterLink } from '@angular/router';
  
  @Component({
    selector: 'app-home',
    standalone: true,
    imports: [RouterLink],
    template: `
      <h2>Home Component</h2>
      <p>This is the home page. The admin module is not loaded yet.</p>
      <button [routerLink]="['/admin']">Go to Admin Dashboard</button>
    `
  })
  export class HomeComponent {}
  
  // src/app/components/admin-dashboard/admin-dashboard.component.ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-admin-dashboard',
    standalone: true,
    template: `
      <h2>Admin Dashboard (Lazy Loaded)</h2>
      <p>This component was loaded only when you navigated to '/admin'.</p>
    `
  })
  export class AdminDashboardComponent {
    constructor() {
      console.log('AdminDashboardComponent loaded!'); // You'll see this only on navigation
    }
  }
  

  Example 2: Caching Proxy Service

  // src/app/services/heavy-data.service.ts (The "Real Subject")
  import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { delay, tap } from 'rxjs/operators';
  
  @Injectable({ providedIn: 'root' })
  export class HeavyDataService {
    getComplexData(): Observable<string> {
      console.log('HeavyDataService: Fetching complex data...');
      // Simulate a heavy operation (e.g., large data fetch, complex calculation)
      return of('Complex Data fetched from source').pipe(delay(1000));
    }
  }
  
  // src/app/proxies/data-caching.proxy.ts (The "Proxy")
  import { Injectable, inject } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { tap } from 'rxjs/operators';
  import { HeavyDataService } from '../services/heavy-data.service';
  
  @Injectable({ providedIn: 'root' })
  export class DataCachingProxy {
    private heavyDataService = inject(HeavyDataService);
    private cache: string | null = null;
    private lastFetched: number = 0;
    private cacheDurationMs = 5000; // Cache for 5 seconds
  
    getComplexData(): Observable<string> {
      const now = Date.now();
      if (this.cache && (now - this.lastFetched < this.cacheDurationMs)) {
        console.log('DataCachingProxy: Returning data from cache.');
        return of(this.cache);
      } else {
        console.log('DataCachingProxy: Cache expired or empty, fetching from real service.');
        return this.heavyDataService.getComplexData().pipe(
          tap(data => {
            this.cache = data;
            this.lastFetched = now;
          })
        );
      }
    }
  }
  

  Usage in a component:

  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { DataCachingProxy } from './proxies/data-caching.proxy';
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
      <h2>Proxy Pattern Example: Caching Service</h2>
      <button (click)="fetchData()">Fetch Data</button>
      <p>Data: {{ cachedData }}</p>
      <p>Check console to see if real service is called or cache is used.</p>
    `
  })
  export class AppComponent {
    private dataProxy = inject(DataCachingProxy);
    cachedData: string | null = null;
  
    fetchData(): void {
      this.dataProxy.getComplexData().subscribe(data => {
        this.cachedData = data;
      });
    }
  }
  

• Use Cases:

  • Lazy loading: Deferring the loading of modules, components, or data until they are explicitly needed (e.g., with Angular Router).
  • Caching: Providing a cached version of expensive operations (as shown above).
  • Security/Access Control: Restricting access to certain functionalities based on user roles (e.g., an AuthProxyService that checks permissions before allowing access to certain AdminService methods).
  • Logging/Monitoring: Intercepting method calls to log their execution or performance metrics.

5. Behavioral Design Patterns in Angular

Behavioral patterns deal with the algorithms and assignment of responsibilities between objects. They describe how objects and classes interact and distribute responsibility.

Chain of Responsibility

• Definition: Passes a request along a chain of handlers. Upon receiving a request, each handler decides either to process the request or to pass it to the next handler in the chain.

• Problem: You have a series of operations or validations that might need to be applied to a request or an object, and the order or execution depends on various conditions. You want to avoid coupling the sender of a request to its receivers, allowing multiple objects to handle the request without knowing the full chain structure.

• Angular Implementation: HTTP Interceptors in Angular are a perfect example. Other applications include form validation pipelines, or event processing where multiple services might respond to an action.

  Example: HTTP Interceptors (Built-in Chain of Responsibility) Angular’s HTTP_INTERCEPTORS provide a powerful, built-in implementation of the Chain of Responsibility pattern. Each interceptor can process an HTTP request before passing it to the next in the chain, or even short-circuit the chain.

  // src/app/interceptors/auth.interceptor.ts
  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class AuthInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      // Add authorization token (if available)
      const authToken = localStorage.getItem('authToken');
      if (authToken) {
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${authToken}`
          }
        });
        console.log('AuthInterceptor: Added auth token.');
      }
      return next.handle(request);
    }
  }
  
  // src/app/interceptors/logging.interceptor.ts
  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { tap } from 'rxjs/operators';
  
  @Injectable()
  export class LoggingInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const started = Date.now();
      console.log(`LoggingInterceptor: ${request.method} ${request.url} started.`);
  
      return next.handle(request).pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            const elapsed = Date.now() - started;
            console.log(`LoggingInterceptor: ${request.method} ${request.url} completed in ${elapsed} ms.`);
          }
        })
      );
    }
  }
  
  // src/app/app.config.ts (or NgModule providers)
  import { ApplicationConfig } from '@angular/core';
  import { provideRouter } from '@angular/router';
  import { routes } from './app.routes';
  import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { AuthInterceptor } from './interceptors/auth.interceptor';
  import { LoggingInterceptor } from './interceptors/logging.interceptor';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes),
      provideHttpClient(withInterceptorsFromDi()), // Enable DI-based interceptors
      { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
    ]
  };
  
  // src/app/app.component.ts
  import { Component, inject } from '@angular/core';
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, HttpClientModule], // HttpClientModule needed for basic HttpClient DI
    template: `
      <h2>Chain of Responsibility Example: HTTP Interceptors</h2>
      <button (click)="fetchData()">Fetch Data (Check Console)</button>
      <p *ngIf="data">Data: {{ data | json }}</p>
    `
  })
  export class AppComponent {
    private http = inject(HttpClient);
    data: any;
  
    fetchData() {
      // Set a dummy token for AuthInterceptor to act
      localStorage.setItem('authToken', 'my-dummy-jwt');
  
      this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe({
        next: response => {
          this.data = response;
          console.log('Component: Data received!');
        },
        error: err => console.error('Component: Error fetching data', err)
      });
    }
  }
  

• Use Cases:

  • HTTP request processing: Authentication, logging, error handling, caching, retry logic via HTTP Interceptors.
  • Form validation pipelines: A series of validators that process user input.
  • Workflow processing: Defining steps in a business process where each step can decide to process or pass to the next.
  • Event handling: Allowing multiple handlers to potentially react to an event until one handles it.