angular-craft

Angular Craft

Framework-specific rules on top of frontend-craft, aligned with the official Angular team's agent skill (modern Angular, v17–v21). Detect the project's Angular version first — features differ by version; don't apply v21 APIs to a v16 project. Match the codebase's existing style before introducing anything new.

The verification loop (non-negotiable)

After generating or changing Angular code, run ng build (the project's build). If it errors, fix before proceeding — don't report done on code that doesn't compile. This is in addition to the DevFlow stop-gate; Angular's own type/template checking catches template-binding and signal mistakes the linter won't.

Ban the legacy quartet (for new code on a modern project)

Agents habitually emit outdated Angular. On v17+ projects, do NOT write:

• NgModules — standalone is the default (v19+); don't even write standalone: true (redundant).
• @Input() / @Output() decorators — use input() / output() / model().
• *ngIf / *ngFor / *ngSwitch — use built-in @if / @for / @switch.
• Constructor injection — use inject() in field initializers.

For a legacy codebase, don't hand-rewrite — offer the automated schematics: ng g @angular/core:control-flow, :inject, :signal-input-migration, :output-migration, :standalone, :self-closing-tag (each gated on a green ng build).

Components & templates

• Scaffold with the CLI (ng g component ...) for consistency; standalone, with explicit imports. Self-closing tags for componentless content (<app-profile />).
• Control flow: @if (user(); as u) { } @else { }; @for (x of items(); track x.id) { } @empty { } — track is required; @switch uses strict equality (no fallthrough).
• Follow the project's naming; modern style guide drops the Component suffix.

Signals (state) — the core of modern Angular

• signal() (read x(), write .set()/.update()); expose service state as readonly with .asReadonly().
• computed() for derived values — lazy, memoized, auto-tracks only signals read.
• linkedSignal() for derived-but-user-overridable state (e.g. default selection that survives option changes). Decision: strictly derived → computed; derived + overridable → linkedSignal; "sync state via effect" → anti-pattern.
• Async reactivity rule: reactive contexts are synchronous. Read every signal BEFORE any await — reads after await don't register a dependency and silently break reactivity.