← ClaudeAtlas

angular-developerlisted

Use when writing modern Angular (v19-v21+) code - Signal Forms, linkedSignal, resource/httpResource, effect/afterRenderEffect, native CSS animations (animate.enter/leave), Angular Aria headless components, and the Angular CLI MCP server. Covers version-gated APIs and gotchas that changed after Angular 19.
Mixard/fable-pack · ★ 1 · Web & Frontend · score 74
Install: claude install-skill Mixard/fable-pack
# Modern Angular Patterns Always check the project's Angular version in `package.json` before choosing APIs - the features below are version-gated and behave differently or do not exist on older versions. When creating a new project, do not pin a version unless asked: use `ng new` if the CLI is installed, otherwise `npx @angular/cli@latest new <name>` (or `npx @angular/cli@<version> new <name>` when the user requests a specific version). After generating code, run `ng build` and fix errors before finishing. Prefer `ng add <package>` over `npm install` for Angular libraries (it runs init schematics), and `ng generate` for components/services/directives. ## Reactivity: which primitive - `computed()` - state strictly derived from other state, never manually set. - `linkedSignal()` - derived default that the user can still override with `.set()`/`.update()`; resets when the source changes. Object form `{ source, computation }` receives `previous` to preserve a still-valid selection. See [linked-signal.md](references/linked-signal.md). - `resource()` / `httpResource()` - async data as signals (experimental). `params` + async `loader({ params, abortSignal })`; always pass `abortSignal` to fetch. Status signals: `value()`, `hasValue()`, `isLoading()`, `error()`, `status()` (`'idle' | 'loading' | 'resolved' | 'error' | 'reloading' | 'local'`). Prefer `httpResource` when using HttpClient (keeps interceptors). See [resource.md](references/resource.md). - `effect()` - only for synci