di-patterns

Dependency Injection Patterns

This document covers advanced dependency injection patterns for Angular 22+ development in Fundamental NGX.

Table of Contents

• Pattern 1: Contextual Defaults with InjectionTokens
• Pattern 2: Component Composition with InjectionTokens
• Pattern 3: Programmatic Signal Input Updates
• Why Not @ContentChild with Signal Inputs?

---

Pattern 1: Contextual Defaults with InjectionTokens

Use InjectionToken to provide contextual defaults for child components. This pattern allows parent components to influence default values without directly manipulating child component inputs.

When to use

• Parent components need to provide default configurations to unknown child components
• Setting framework-level defaults (themes, sizes, behaviors)
• Avoiding tight coupling between parent and child components
• Providing optional configuration that children can override

Implementation

Step 1: Define the token (in child component file)

// title.component.ts
import { InjectionToken } from '@angular/core';

export type HeaderSizes = 1 | 2 | 3 | 4 | 5 | 6;

export const DEFAULT_TITLE_SIZE = new InjectionToken<HeaderSizes>('DEFAULT_TITLE_SIZE');

Step 2: Child component injects optional default

@Component({
    selector: '[fd-title]'
})
export class Title {
    readonly headerSize = input<HeaderSizes | null>(null);

    private readonly _defaultHeaderSize = inject(DEFAULT_TITLE_SIZE, { optional: true });

    // Compute the effective size: explicit input > injected default > element tag name
    protected readonly _effectiveSize = computed(
        () => this.headerSize() ?? this._defaultHeaderSize ?? this._detectSize()
    );

    // Use effect only for the imperative DOM side effect
    constructor() {
        effect(() => {
            const size = this._effectiveSize();
            untracked(() => this._applySize(size));
        });
    }

    private _detectSize(): HeaderSizes {
        // Fallback logic
        return 3;
    }
}