Why Angular Signals’ Model Is So Powerful
Angular just keeps evolving. The goal is always to enhance the Developer Experience (DX) while simultaneously optimizing the framework’s efficiency and performance.
What Are Signals (In a Nutshell)?
Signals introduce a new approach to managing reactive state in Angular. Think of them as values that can evolve over time, and they automatically ping anything that’s using them when an update occurs.
Essentially, a Signal is a reactive data source. When you access it, you get its current value. And when you modify it, Angular spots that change and automatically refreshes any part of your code or template that has a dependency on it.
You can check out the official Angular Signals documentation, for more information.
What Model Do Signals Use?
Signals are built on a reactive dependency graph model, often called a directed graph. In this setup, each signal acts like a node with three key properties:
- Current Value: This is the actual data the signal holds.
- Version: An internal number that bumps up every time the value changes.
- Relationships: References to other nodes that either consume its data (its consumers) or that it depends on for its own value (its producers).
Angular dynamically constructs this graph at runtime as signals get evaluated.
const name = signal('Martin');
When a signal is created, Angular sets up the SIGNAL_NODE. It then keeps track of who’s consuming or reading that signal’s value. If this read happens within a reactive context — like an effect, a computed signal, or directly in your template (HTML)—this reference lives in the activeConsumer.
What happens next is a bidirectional relationship established between the SIGNAL_NODE (name) and the activeConsumer node (which, by the way, can be various types of nodes itself).
<!-- template.html -->
<div>
{{ name() }}
</div>
The LVIEW_NODE (think of it as a conceptual name; Angular doesn’t literally call it that) gets added as a consumer of the “name” signal. This node is then linked using a doubly linked list, meaning the LVIEW_NODE essentially has the SIGNAL_NODE as one of its producers.
Get Martin Araujo’s stories in your inbox
Join Medium for free to get updates from this writer.
With this relationship logged, if at any point in the application’s lifecycle you do the following:
name.set('John');The set implementation's behavior is to notify all its consumers. Each consumer holds a reference to the last version it read. When that version changes, it's necessary to mark that node as "dirty" and update it to the new value.
And this is precisely where you can see the power of Signals that we mentioned in the article’s title.
Why Signals Are a Game-Changer
To realize why Signals represent such a significant evolution, it’s helpful to compare them with Angular’s classic Change Detection model.
Angular traditionally relies on Zone.js (via NgZone) to automatically detect when a change occurs in your application’s state.
It achieves this by intercepting asynchronous tasks, DOM events, promises, and more. When it spots any of these actions, NgZone triggers a full Change Detection cycle, evaluating the entire component tree to see if anything changed and needs re-rendering.
This approach is safe and reactive, but it’s not particularly efficient. In large applications, traversing the whole component tree can be quite costly.
One way to optimize this is with the ChangeDetectionStrategy.OnPush strategy, which tells Angular that a component should only re-render if one of its inputs changes or if a detection is manually triggered.
This is exactly where Signals shine.
Unlike the previous approach, a Signal keeps an explicit record of who’s reading it and when, thanks to its producer and consumer system.
This lets it know precisely which part of the UI needs to be updated when a value changes. There’s no need to walk the entire tree or rely on heuristics: Angular knows exactly what to update and when.
It’s important to clarify that Signals don’t completely replace Angular’s Change Detection system. They still rely on Angular to re-render templates.
What does change is how Angular detects what needs updating. Instead of assuming everything might have changed, it can now precisely pinpoint which parts of the UI react to specific values.
For a deeper dive into how Angular’s Change Detection works, you might find this video helpful: “Modern Change Detection” by Rainer Hahnekamp.
If you’d like to keep the conversation going about Angular, feel free to connect with me on LinkedIn.
