Understanding linkedSignal vs computed in Angular Signals

#angular #webdev #ui #programming

While exploring Angular’s Signals system, I came across something that initially felt a bit redundant — linkedSignal. At first glance, it seems like you could just use computed() to handle state that depends on other signals. For example:

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = computed(() => shippingOptions()[0]);

This works fine if all you need is a reactive read of the first shipping option. But here’s where linkedSignal offers more power.

The Key Difference: Writability

What sets linkedSignal apart is that it’s writable, whereas computed() is read-only. That means with linkedSignal, you can derive state reactively like computed, and update it locally when needed.

For example:

const selectedOption = linkedSignal(() => shippingOptions()[0]);
selectedOption.set('Air'); // You can override it manually

This is useful when you want something to default to a derived value, but still let the user (or component logic) update it manually afterward.

Handling Previous State

Another benefit of linkedSignal is access to the previous value during computation. You can do things like:

const selectedOption = linkedSignal({
  source: shippingOptions,
  compute: (newValue, oldValue) => {
    // maybe preserve selection if still valid
    return newValue.includes(oldValue) ? oldValue : newValue[0];
  }
});

This kind of logic isn’t possible with computed(), which doesn’t track previous values in the same way.

When to Prefer linkedSignal

Use linkedSignal when:

You want a derived default value, but still need the flexibility to update it locally.
You’re working with inputs or external signals but want to maintain a local copy that can be overridden internally.
You need access to the previous state during recalculations.
In contrast, computed() is perfect when your signal is purely reactive and read-only, with no need to write back or override.