Angular Best Practices

# Modern Angular Best Practices

A comprehensive set of 112 rules covering TypeScript strictness, signal-based reactivity, component architecture, template optimization, RxJS patterns, SSR hydration, bundle optimization, accessibility, routing, forms, testing, and styling — so every component, service, template, and route you build is fast, accessible, tested, and maintainable.

Below are the key patterns organized by what you're working on. For edge cases or when you need specific code examples beyond what's listed here, consult the AGENTS.md reference file in this skill directory.

## Components & Signals

Components are the building blocks. Modern Angular uses signals for reactivity, which changes how you write everything from state to templates.

- Use standalone components with `ChangeDetectionStrategy.OnPush`
- Use `input()`, `output()`, `model()` signal functions instead of decorators
- Use `inject()` instead of constructor injection
- Use `signal()` for local state, `computed()` for derived state
- Use `linkedSignal()` when state should reset when a source changes
- Use `resource()` / `httpResource()` for async data with built-in loading states
- Use `effect()` only for side effects — never for state synchronization
- Use `toSignal()` to bridge RxJS observables into signal-based templates
- Use `viewChild()` / `contentChild()` signal queries instead of decorators
- Use the `host` property instead of `@HostBinding` / `@HostListener`

## Templates & Styles

Templates and styles work together — accessibility, layout, and performance cross both concerns.

- Use `@if`, `@for`, `@switch` control flow instead of structural directives
- Use `@defer` for heavy below-fold content
- Always provide `track` with `@for` loops
- Use `NgOptimizedImage` with `priority` for above-fold images
- Use pure pipes instead of method calls in templates
- Use `CdkVirtualScrollViewport` for large lists
- Use `[class.active]` bindings instead of `[ngClass]`
- Define theme values as CSS custom properties
- Use `prefers-reduced-motion` to respect motion preferences

## Services & RxJS

Services handle data flow, dependency injection, and RxJS patterns. HTTP, caching, and observable lifecycle are interconnected concerns.

- Unsubscribe via `takeUntilDestroyed()` or `async` pipe
- Place `catchError` inside `switchMap` to keep the outer stream alive
- Use `switchMap` for latest-only, `exhaustMap` for ignore-while-busy
- Use `shareReplay({ bufferSize: 1, refCount: true })` for shared streams
- Use `inject()` with `InjectionToken` for configuration
- Use HTTP interceptors for cross-cutting concerns (auth, retry, logging)
- Map DTOs at the API boundary — don't leak backend shapes into components

## Performance & SSR

Performance rules span components, templates, and infrastructure. SSR affects routing, data