13 January 2025

Understanding Signals in Angular: The Future of Reactivity

Signals have given Angular one of its most interesting shifts in years. They don't merely add another state primitive, they change how we talk about updates, derived values, and the boundary between state and side effects. That's why so many Angular developers see them as more than a new API. They represent a clearer and more explicit model for reactivity inside the framework.

Even so, it is worth resisting the temptation to describe signals as the answer to everything. Angular already has observables, inputs, outputs, forms, and a mature dependency injection model. Signals matter because they simplify a large class of state problems, not because they erase every existing tool.

What a Signal Gives Us

A signal stores a value and lets Angular track who reads it. When that value changes, Angular can update only the consumers that depend on it. That's a more direct mental model than broad change detection sweeps, and it often leads to code that is easier to follow.

Computed values and effects build on that core idea. Computed signals derive new values from other signals, and effects let us respond to changes deliberately. The split is useful because it keeps derivation separate from side effects, which improves maintainability.

A Practical Example

import { Component, computed, effect, signal } from '@angular/core';@Component({  selector: 'app-cart-summary',  standalone: true,  template: `    <p>Items: {{ itemCount() }}</p>    <p>Total: {{ formattedTotal() }}</p>  `,})export class CartSummaryComponent {  readonly prices = signal([12, 18, 9]);  readonly itemCount = computed(() => this.prices().length);  readonly total = computed(() => this.prices().reduce((sum, value) => sum + value, 0));  readonly formattedTotal = computed(() => `£${this.total().toFixed(2)}`);  constructor() {    effect(() => {      console.log('Cart total changed to', this.total());    });  }}

This example shows the main discipline signals encourage. Derived values stay as derived values. Logging stays in an effect. Once we preserve that separation, the state flow becomes much easier to reason about.

How Signals Differ from RxJS

A lot of Angular developers assume that signals replace RxJS outright. They don't. RxJS still excels when we're modelling streams, cancellation, combination of async events, or complex time‑based behaviour. Signals are strongest when we need straightforward local or shared reactive state with direct reads in templates or component logic.

In practice, many Angular applications will use both. Signals can model state, and observables can continue modelling external asynchronous streams. The important thing is choosing the right abstraction for the problem rather than arguing about which one is newer.

Why Signals Help Performance and Clarity

Signals can improve rendering efficiency because Angular knows exactly which consumers depend on which values. They also help clarity because the data flow is explicit. We read a signal by calling it, derive from it through `computed`, and isolate side effects with `effect`. That structure removes a lot of the ambiguity that used to build up around manual subscriptions or wide change‑detection assumptions.

Keeping Signal‑Based State Readable

Signals are highly testable because they are synchronous and local by default. They improve maintainability when we keep computed state pure and effects narrow. They scale well when we use them to express real data relationships rather than as wrappers around every variable in the application.

The real risk is overuse. If everything becomes an effect, we'll simply recreate the same hidden‑coupling problems under a different name. The strongest signal‑based code keeps state, derivation, and side effects distinct.

The official Angular guides below are the clearest references for the APIs touched on here:

Wrapping up

Signals matter because they make state relationships easier to express directly, not because they replace every existing Angular abstraction. Used with that mindset, they clarify far more than they complicate.

Key Takeaways

Signals give Angular a clearer model for state, derived values, and effects.
They complement RxJS rather than replacing it in every case.
The biggest gains come from explicit data flow and disciplined effect usage.

Signals feel important because they make reactive state easier to read, not because they make older ideas obsolete. That's usually the sign of a genuinely useful framework improvement.