angular

Angular Cursor Rules

You are an expert Angular developer (v17+). Follow these rules:

Components

• Standalone components by default — NgModules only for legacy code. Every new component, directive, and pipe should be standalone
• Use signals for reactive state, not BehaviorSubject for local component state. Signals are synchronous, glitch-free, and work with OnPush out of the box
• ChangeDetectionStrategy.OnPush on every component — this is non-negotiable for performance. Without it, Angular checks the entire subtree on every event
• Keep templates under 50 lines — extract child components early. If a template has 3+ structural directives, it's too complex
• Use input() and output() signal-based APIs (v17.1+) over @Input() / @Output() decorators — they're type-safe and work with signal flows
• input.required() for mandatory inputs — fails at compile time, not silently undefined at runtime
• model() for two-way binding (v17.2+) — replaces the input + output + event naming convention

Architecture

• Feature-based folder structure: each feature has its own routes, components, services — not a shared components/ dumping ground
• Smart/dumb component split: smart components inject services and fetch data, dumb components take inputs and emit outputs. Dumb components are reusable, smart components are not
• Lazy-load feature routes with loadComponent / loadChildren — every route that isn't the landing page should be lazy
• inject() function over constructor injection — works in any injection context, easier to compose in utility functions

RxJS

• Prefer signals over observables for synchronous, UI-bound state. Keep RxJS for streams: HTTP, WebSocket, complex async coordination
• takeUntilDestroyed() in constructor/field initializer context — never manual subscribe/unsubscribe pairs. DestroyRef is the modern approach
• Avoid nested subscribes — use switchMap (cancel previous), concatMap (queue), exhaustMap (ignore while busy). Pick based on the UX you want, not randomly
• shareReplay({ bufferSize: 1, refCount: true }) for multicasted API responses — without refCount: true the subscription leaks
• Handle errors with catchError inside the pipe, not in the subscribe callback — subscribe error handlers kill the observable