A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
The previous two chapters introduced Observables and the transformation and filtering operators. This chapter is about the four operators that cause the most confusion and produce the most bugs in Angular code: switchMap, mergeMap, concatMap, and exhaustMap. They share a signature — a function from a value to an Observable — but they handle concurrency…
An Observable is a stream that a consumer subscribes to, and the producer is the Observable’s own subscriber function. A Subject is different: it is both an Observable and an Observer. It can be subscribed to like an Observable, and it can emit values like an Observer. This dual nature is what makes it the…
A single stream is a sequence of values over time. Real applications rarely have just one. A component needs the current user, the current route, the current filter, and the current data, and it needs to react when any of them changes. The combining operators are how multiple streams are brought together into one. They…
An Observable has three channels: next for values, error for a terminal failure, and complete for a terminal success. The error channel is the one that is most often mishandled. Unlike next, which can fire any number of times, error fires once and terminates the stream — after it fires, no further values are emitted…
Every Observable in RxJS is either cold or hot, and the distinction determines what happens when more than one subscriber arrives. A cold Observable creates a new producer for each subscriber — two subscribers to an HTTP call send two requests, and two subscribers to an interval create two timers. A hot Observable shares a…
State management in Angular has moved through several generations. The first was services holding plain properties, mutated by components. The second was services holding BehaviorSubjects, with components subscribing to the observable streams. The third, in modern Angular, is signals — synchronous, dependency-tracking reactive values. But RxJS has not gone away: signals handle synchronous state, while…
Signals are Angular’s reactive primitive. A signal is a value that notifies its consumers when it changes, and a component that reads a signal is marked for change detection when the signal changes. The API is small — signal, computed, and effect are the three functions — but the model they implement is the foundation…
A computed signal is a derived value. It reads other signals — called its dependencies — and produces a value from them. When any dependency changes, the computed signal marks itself as stale, and the next read recomputes the value. This is the mechanism that turns a set of independent signals into a graph, where…
An effect is a function that runs when the signals it reads change. It is the escape hatch from the signal graph to the imperative world — the place where a signal’s change is translated into a side effect that is not a value: a DOM update, a log, a persistence write, an external API…
A signal-based component is a component whose state is expressed with signals, whose inputs are signals, whose outputs are signal-aware, and whose template reads the signals directly. The change detection is driven by the signals, and the component is checked only when the signals it reads change. The model is the modern Angular, and it…