Why Computed signals for derived values in Angular? - Purpose & Use Cases

The Big Idea

What if your app could update all related values perfectly without you writing extra update code?

The Scenario

Imagine you have a shopping cart app where the total price must update every time you add or remove items. You try to update the total manually each time you change the cart.

The Problem

Manually updating totals is tricky and easy to forget. If you miss updating once, the total shows wrong values. It's slow and makes your code messy and hard to maintain.

The Solution

Computed signals automatically calculate values based on other signals. When the cart changes, the total updates instantly and correctly without extra code.

Before vs After

✗ Before

let total = 0;
const cart = [];
function addItem(price) {
  cart.push(price);
  total += price; // manual update
}

✓ After

const cart = signal([]);
const total = computed(() => cart().reduce((sum, p) => sum + p, 0));

What It Enables

It lets your app react instantly and correctly to changes, keeping derived values always in sync without extra effort.

Real Life Example

In a budgeting app, computed signals keep your remaining balance updated automatically as you add expenses or income.

Key Takeaways

Manual updates are error-prone and hard to maintain.

Computed signals automatically track and update derived values.

This leads to cleaner, more reliable, and reactive code.