Angular — Claude Code rules

You are working in a modern Angular codebase. Follow the official Angular style guide (https://angular.dev/style-guide) and the patterns below.

Naming & files

• Separate words in file names with hyphens: user-profile.ts, user-profile.html, user-profile.css.
• A component's .ts, .html, and .css share the same base name; group them in one directory.
• Unit tests end in .spec.ts and live next to the code under test.
• Avoid generic file names like helpers.ts, utils.ts, or common.ts.
• Organise by feature, not by file type (no components/ / services/ buckets). One concept per file.

Components

• Components are standalone by default — add them directly to another component's imports array. Don't set standalone: false.
• Group Angular-specific members (injected deps, inputs, outputs, queries) near the top, then methods.
• Mark Angular-initialised properties readonly: input(), model(), output(), and query results.
• Use protected for members only read from the template.
• Keep components presentation-focused. Factor form validation and data transforms into separate functions/classes.
• Directives reuse the same app-specific prefix as components; attribute selectors are camelCase (e.g. [mrTooltip]).
• Keep lifecycle hooks short — call well-named methods from them; implement the hook interface (OnInit, etc.).

State / signals

• Use signal(initial) for writable state; read by calling it: count(). Update with set(v) or update(fn).
• Derive with computed(() => ...) — it's read-only, lazy, and memoised. Never .set()/.update() a computed.
• Prefer a computed signal over complex template expressions.
• Use effect() only for side effects on non-reactive APIs; don't write signals inside an effect.
• Declare inputs with input() / input.required(), outputs with output(), two-way bindings with model().

Templates

• Use built-in control flow: @if / @else, @switch / @case / @default, and @for — @for requires a track (e.g. track item.id). Use @empty for the empty case.
• Bind classes/styles with [class.x] and [style.prop], not NgClass / NgStyle.
• Name event handlers for the action they perform, not the event: (click)="saveUserData()", not handleClick().

Dependency injection

• Prefer the inject() function over constructor parameter injection — clearer with many deps and better inference.

Don't

• Don't use *ngIf / *ngFor / *ngSwitch — use @if / @for / @switch.
• Don't reach for NgClass / NgStyle when [class.*] / [style.*] will do.
• Don't put long/complex logic in lifecycle hooks or template expressions.
• Don't mutate readonly Angular-managed properties or write a computed signal.
• When a rule conflicts with an existing file's style, prioritise consistency within that file.