---
description: Modern Angular conventions (standalone, signals, official style guide)
globs: ["**/*.ts", "**/*.html"]
alwaysApply: true
---

- Components are standalone by default; add them to another component's `imports`. Don't set `standalone: false`.
- File names use hyphens; component `.ts`/`.html`/`.css` share a base name and directory. Tests end `.spec.ts` next to the code.
- Organise by feature, not file type. Avoid generic names (`helpers.ts`, `utils.ts`, `common.ts`). One concept per file.
- Prefer `inject()` over constructor parameter injection.
- Group Angular members (deps, inputs, outputs, queries) near the top, then methods. Mark Angular-set props `readonly`; use `protected` for template-only members.
- Inputs via `input()` / `input.required()`, outputs via `output()`, two-way via `model()`.
- State: `signal()` writable, `computed()` derived/read-only (never `.set()`), `effect()` only for side effects (don't write signals inside).
- Templates use `@if` / `@for` (mandatory `track`) / `@switch` — not `*ngIf` / `*ngFor` / `*ngSwitch`.
- Bind classes/styles with `[class.x]` / `[style.prop]`, not `NgClass` / `NgStyle`.
- Name event handlers by action (`saveUserData()`), not event (`handleClick()`).
- Keep lifecycle hooks short and `implement` their interface; keep components presentation-focused.