/web-framework-angular-standalone

name: web-framework-angular-standalone
description: Angular 17–19 standalone components, signals, built-in control flow, inject() DI, the resource API. Load when writing or migrating Angular components.

Angular Standalone Patterns

> **Quick Guide:** Components are standalone and declare their own `imports`; NgModules are opt-in. State is signals — `signal()`, `computed()`, `linkedSignal()` for derived state you also write to, `effect()` only for genuine side effects and `afterRenderEffect()` for DOM work. Communication is `input()`, `output()` and `model()`. Templates use `@if`, `@for` (always with `track`), `@switch` and `@defer`, none of which need an import. Dependencies come from `inject()`.

**Detailed Resources:**

• [examples/core.md](examples/core.md) — a complete standalone component, signals, control flow, parent-child communication
• [examples/dependency-injection.md](examples/dependency-injection.md) — `inject()`, `InjectionToken`, injection options
• [examples/model.md](examples/model.md) — `model()` two-way binding, and when `input()` + `output()` is the better fit
• [examples/defer.md](examples/defer.md) — every `@defer` trigger, with prefetch and placeholder timing
• [examples/angular-19-features.md](examples/angular-19-features.md) — `linkedSignal()`, `resource()`, `rxResource()`, `afterRenderEffect()` phases
• [examples/rxjs.md](examples/rxjs.md) — `toSignal()`, `toObservable()`, and which of the two a problem wants
• [reference.md](reference.md) — decision trees, anti-patterns with corrected code, API and syntax tables, component checklist

---

Which path applies

• **Angular 19** — `standalone: true` is the default, so the flag is noise; write `standalone: false` only for a component that genuinely belongs to an NgModule.
• **Angular 17–18** — the same patterns apply, but `standalone: true` is stated explicitly on every component, directive and pipe.
• **Signal APIs by version** — `linkedSignal()` and `afterRenderEffect()` land in 19, `httpResource()` in 19.2, and the resource family is still experimental. [examples/angular-19-features.md](examples/angular-19-features.md) marks each one.

---

<critical_requirements>

Before writing Angular code

**Declare inputs and outputs with `input()`, `output()` and `model()`.** They are signals, so a `computed()` can depend on an input directly and no `ngOnChanges` is needed to notice it changed.

**Take dependencies with `inject()` in a field initialiser.** It works outside a constructor — in a function, a route guard, a factory — where constructor parameters cannot reach.

**Write templates with `@if`, `@for`, `@switch` and `@defer`.** They need no import, narrow types better than the structural directives, and `@for` has `@empty` and the `$index`/`$first`/`$last` context built in.

**Give every `@for` a `track` expression.** Without a stable key Angular rebuilds the rows rather than moving them, which loses focus and element state along with the performance.

**Update a signal through `.set()` or `.update()` returning a new reference.** Equality is `Object.is`, so mutating the array or object in place leaves the reference unchanged and nothing is notified.

**Use `linkedSignal()` for derived state that is also writable.** It recomputes from its source and still accepts a direct write, which is what a pair of signals kept in step by an `effect()` was imitating.

</critical_requirements>

---

**Auto-detection:** Angular standalone component, signal, computed, effect, linkedSignal, resource, rxResource, httpResource, input(), output(), model(), @if, @for, @switch, @defer, inject(), InjectionToken, provideRouter, bootstrapApplication, afterRenderEffect, afterNextRender, DestroyRef, toSignal, toObservable, viewChild, viewChildren

**Applies to:**

• Standalone components, their `imports` array and their providers
• Signal state: `signal`, `computed`, `linkedSignal`, `effect`, `afterRenderEffect`
• Component communication with `input`, `output` and `model`
• Built-in control flow and `@defer` lazy loading
• Dependency injection with `inject()` and injection tokens
• Application bootstrap and standalone route configuration
• The resource API, and interop between signals and observables

**Handled elsewhere:**

• Styling — a component names its `styles` or `styleUrl` and settles nothing about what goes in them
• Application-wide state stores layered above component signals
• Server-state caching and invalidation policy
• Test doubles for the network

---

<philosophy>

Philosophy

Standalone removed the second declaration site. A component names what it uses in its own `imports`, so the dependency graph is readable from the component and a lazy route can point at a component rather than at a module wrapping one.

Signals then removed the second question. Change detection used to ask "what might have changed?" and walk the tree; a signal records who read it, so an update notifies exactly those consumers. That is why the guidance keeps pushing work down the chain: `computed()` where a value is derived, `linkedSignal()` where it is derived and writable, `effect()` only where something outside the graph has to happen — and `afterRenderEffect()` where that something is the DOM, because it runs in phases that keep reads and writes from thrashing layout.

</philosophy>

---

<patterns>

Core patterns

Pattern 1: Standalone component

A component declares its own imports and communicates through signal functions.

@Component({
  selector: "app-user-card",
  imports: [DatePipe],
  template: `
    <h2>{{ user().name }}</h2>
    <time>{{ user().createdAt | date: "mediumDate" }}</time>
    <button (click)="edit.emit(user())">Edit</button>
  `,
})
export class UserCardComponent {
  user = input.required<User>();
  edit = output<User>();
}

Full code: [examples/core.md](examples/core.md)

---

Pattern 2: Signals

count = signal(0);
doubleCount = computed(() => this.count() * 2);

t