Angular Production Patterns

Production-ready patterns for Angular 21+ applications with zoneless change detection.

Key APIs

Performance Targets

When NOT to Use Angular

• Simple interactivity → Vanilla JS
• Static marketing site → Astro/11ty
• < 100KB JS budget → Svelte or Web Components
• React ecosystem dependency → React

Signal-Based Service Pattern

Private writable signal → public readonly → update in tap() → component injects and reads. Matches AuthService pattern for consistency across services.

Signal Testing Patterns

Angular 21+ Anti-Patterns

Select Binding Gotcha

Angular's <select [value]="signal()"> does not select the matching <option> — the browser uses selectedIndex, not the value attribute. The dropdown silently appears stuck on the first option. Two fixes: [selected]="optionValue === signal()" per <option>, or importing FormsModule and using [(ngModel)].

Progressive Signal Chain Pattern

For data transformation in presentational components, chaining computed signals with single responsibility keeps logic clean: input → filtered → transformed → derived metrics. Downstream signals derive from the filtered signal (not raw input), ensuring filter logic applies exactly once. This pattern naturally emerges in components displaying categorized, aggregated, or excluded data.

See reference.md for the Multi-Entity Page Pattern, CanDeactivate Guard Patterns, HTTP Error Handling Ownership, Debounced Signal-to-Iframe Preview, zoneless change detection, dependency injection, HTTP client patterns, Resource API, component libraries comparison (PrimeNG, Kendo, Angular Material), reactive forms, router patterns, and error handling.

See examples.md for dashboard metrics component, data table with filtering, authentication service, WebSocket service, and signal testing patterns (PLATFORM_ID mocking, WritableSignal, NG0100 prevention).