Skip to content

Angular mental models

Use this page to repair a diagnosed gap, then close it and make a prediction in the linked lesson. Retrieval—not repeated rereading—is the mastery evidence.

Component

A component instance owns a view and participates in a hierarchical injector/render tree. Its template is compiled and type-checked against the class and imported declarables.

Rendering

Angular updates bindings when the view is scheduled for checking. Signals read by a template register reactive dependencies. OnPush narrows checking triggers; it does not make expensive expressions cheap.

State

Classify state before selecting a tool:

  • local synchronous UI value → signal;
  • synchronous derived value → computed signal;
  • async event sequence/cancellation/concurrency → observable;
  • shareable navigation state → URL;
  • authoritative remote data → server plus client cache policy;
  • durable draft → persistence adapter and conflict policy.

Dependency injection

A token identifies a request. A provider supplies a creation/value strategy. The nearest injector with a matching provider resolves it; caching creates scope/lifetime. Provider placement is state architecture.

Routing

The router maps URL state to a route tree, injector tree, and component tree. Lazy loading changes code delivery; guards influence navigation; backend authorization controls data access.

Forms

A form models value, validation, interaction, and disabled state. Client validation improves feedback and data shape, not trust. Typed forms move mismatch detection to compilation.

HTTP

HTTP observables are cold and finite in the common case. A generic response type is an assertion to TypeScript, not runtime validation. Repositories isolate protocol/DTO details from domain consumers.

Testing

Test at the narrowest boundary that proves important behavior. Pure decisions need no browser. Rendered contracts need a component. Navigation needs router integration. Only critical cross-system journeys justify slower E2E coverage.

Performance

Measure startup, network, render, interaction, and memory separately. Stable identity, lazy delivery, computed derivation, deferral, and virtualization solve different bottlenecks.

Apply the models

Use Lessons 1–12 to test each model through implementation and failure. If a simplified model stops predicting behavior, record the divergence in the learning map and refine it with runtime evidence.