Computed signals for derived values in Angular - Step-by-Step Execution

Concept Flow - Computed signals for derived values

Create base signals

↓

Define computed signal

↓

Access computed signal

↓

Base signal changes?

No→Use cached value

Yes↓

Recompute derived value

↓

Update computed signal value

This flow shows how base signals are created, a computed signal is defined from them, and how changes in base signals trigger recomputation of the derived value.

Execution Sample

Angular

const count = signal(1);
const doubleCount = computed(() => count() * 2);
console.log(doubleCount());
count.set(3);
console.log(doubleCount());

This code creates a base signal 'count', a computed signal 'doubleCount' that doubles 'count', then logs the computed value before and after changing 'count'.

Execution Table

Step	Action	count value	doubleCount value	Explanation
1	Initialize count with 1	1	undefined	Base signal 'count' starts at 1, computed not evaluated yet
2	Define doubleCount as count * 2	1	undefined	Computed signal created but not yet accessed
3	Access doubleCount()	1	2	Computed runs: 1 * 2 = 2, caches value 2
4	Set count to 3	3	2	Base signal changes, computed cache invalidated
5	Access doubleCount() again	3	6	Computed re-runs: 3 * 2 = 6, updates cache

💡 Execution stops after logging updated computed value; no further changes.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5
count	1	1	3	3
doubleCount	undefined	2	2 (cache invalidated)	6

Key Moments - 2 Insights

Why does doubleCount not update immediately when count changes?

The computed signal caches its value until accessed again. When 'count' changes (Step 4), the cache is invalidated but 'doubleCount' only recomputes when called next (Step 5). See execution_table rows 4 and 5.

What happens if we never call doubleCount() after count changes?

The computed signal's value stays stale because it only recalculates when accessed. So changes in base signals alone don't trigger recomputation until the computed signal is read.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of doubleCount after Step 3?

A 1

B undefined

C 2

D 3

💡 Hint

Check the 'doubleCount value' column at Step 3 in the execution_table.

At which step does the computed signal cache get invalidated?

A Step 2

B Step 4

C Step 5

D Step 3

💡 Hint

Look for when 'count' changes and cache is marked invalid in the execution_table.

If we never call doubleCount() after changing count, what happens to doubleCount's value?

A It stays the old cached value

B It resets to undefined

C It updates automatically

D It throws an error

💡 Hint

Refer to key_moments explanation about computed signals caching behavior.

Concept Snapshot

Computed signals derive values from base signals.
They cache results until base signals change.
When a base signal changes, cache invalidates.
Computed recomputes only when accessed next.
Use computed() to define derived reactive values.

Full Transcript

In Angular, computed signals let you create values derived from other signals. First, you create base signals with signal(). Then, you define a computed signal using computed() that depends on those base signals. When you access the computed signal, it runs its function and caches the result. If a base signal changes, the computed signal's cache is invalidated but it does not recompute immediately. It waits until you access it again, then it recalculates using the latest base signal values. This behavior helps optimize performance by avoiding unnecessary recalculations. The example code shows count starting at 1, doubleCount doubling it, then count changes to 3. The computed signal updates only when accessed after the change. This step-by-step trace helps beginners see how Angular's computed signals work internally.

Practice

1. What is the main purpose of a computed signal in Angular's signal system?

easy

A. To replace all signals with a single global state

B. To store static data that never changes

C. To automatically update a value based on other signals when they change

D. To manually trigger UI updates

Solution

1. Step 1: Understand what computed signals do

   Computed signals derive their value from other signals and update automatically when those signals change.

2. Step 2: Compare options with this behavior

   Only To automatically update a value based on other signals when they change describes automatic updates based on dependencies, which matches computed signals.

3. Final Answer:

   To automatically update a value based on other signals when they change -> Option C

4. Quick Check:

   Computed signals = auto-update derived values [OK]

Hint: Computed signals auto-update when dependencies change [OK]

Common Mistakes:

• Thinking computed signals store static data
• Confusing manual updates with automatic updates
• Assuming computed signals replace all signals

2. Which of the following is the correct syntax to create a computed signal in Angular?

easy

A. const total = computed(() => price() + tax());

B. const total = signal(() => price + tax);

C. const total = computed(price + tax);

D. const total = signal(price() + tax());

Solution

1. Step 1: Recall computed signal syntax

   Computed signals use computed(() => ...) with a function returning the derived value.

2. Step 2: Check each option

   const total = computed(() => price() + tax()); correctly uses computed(() => price() + tax()). const total = signal(() => price + tax); wrongly uses signal and no function. const total = computed(price + tax); misses the function wrapper. const total = signal(price() + tax()); uses signal instead of computed.

3. Final Answer:

   const total = computed(() => price() + tax()); -> Option A

4. Quick Check:

   Computed syntax = computed(() => value) [OK]

Hint: Use computed(() => ...) with a function for derived values [OK]

Common Mistakes:

• Using signal() instead of computed() for derived values
• Passing expressions directly without a function
• Not calling dependent signals as functions

3. Given the code below, what will be logged after count.set(5) is called?

const count = signal(0);
const double = computed(() => count() * 2);

console.log(double());
count.set(5);
console.log(double());

medium

A. 0 then 10

B. 0 then 0

C. NaN then 10

D. Error at runtime

Solution

1. Step 1: Evaluate initial values

   Initially, count is 0, so double() returns 0 * 2 = 0.

2. Step 2: After count.set(5)

   Setting count to 5 updates double automatically. Calling double() now returns 5 * 2 = 10.

3. Final Answer:

   0 then 10 -> Option A

4. Quick Check:

   Initial double=0, after update=10 [OK]

Hint: Computed updates automatically after signal changes [OK]

Common Mistakes:

• Assuming computed does not update after set()
• Forgetting to call signals as functions
• Expecting errors due to missing subscriptions

4. Identify the error in the following code snippet using computed signals:

const price = signal(100);
const tax = signal(0.1);
const total = computed(() => price + tax * price);

console.log(total());

medium

A. Computed signals cannot use arithmetic operations

B. Signals must be called as functions inside computed

C. Signals cannot be used inside computed

D. Missing initial value for tax signal

Solution

1. Step 1: Check how signals are accessed

   Signals are functions and must be called with () to get their current value.

2. Step 2: Analyze the computed expression

   The expression uses price and tax directly without calling them, so it uses the signal objects, not their values.

3. Final Answer:

   Signals must be called as functions inside computed -> Option B

4. Quick Check:

   Access signals with () inside computed [OK]

Hint: Always call signals as functions inside computed [OK]

Common Mistakes:

• Using signal variables directly without ()
• Thinking computed disallows arithmetic
• Ignoring signal initial values

5. You want to create a computed signal that returns the full name by combining two signals: firstName and lastName. Which code correctly updates the full name when either signal changes and avoids unnecessary recomputations?

hard

A. const fullName = computed(() => firstName() + lastName());

B. const fullName = signal(`${firstName()} ${lastName()}`);

C. const fullName = computed(() => firstName + ' ' + lastName);

D. const fullName = computed(() => `${firstName()} ${lastName()}`);

Solution

1. Step 1: Understand the goal

   The computed signal should combine firstName and lastName signals and update automatically when either changes.

2. Step 2: Evaluate each option

   const fullName = computed(() => `${firstName()} ${lastName()}`); correctly calls both signals as functions and concatenates with a space. const fullName = signal(`${firstName()} ${lastName()}`); uses signal which won't update automatically. const fullName = computed(() => firstName + ' ' + lastName); uses signal variables directly without calling them. const fullName = computed(() => firstName() + lastName()); concatenates without space.

3. Final Answer:

   const fullName = computed(() => `${firstName()} ${lastName()}`); -> Option D

4. Quick Check:

   Call signals with () and combine with space [OK]

Hint: Use computed with template literals calling signals () [OK]

Common Mistakes:

• Using signal() instead of computed() for derived values
• Not calling signals as functions
• Forgetting space between names