[Solved] Given the code below, what will be the output of console.log(fullName()) after firstName.set('Jane') is called?const firstName = signal('John'); const lastName = signal('Doe');... | Angular

Angular - Signals

Given the code below, what will be the output of console.log(fullName()) after firstName.set('Jane') is called?

const firstName = signal('John');
const lastName = signal('Doe');
const fullName = computed(() => `${firstName()} ${lastName()}`);
firstName.set('Jane');
console.log(fullName());

AThrows an error because fullName is not updated

B"Jane Doe"

C"Jane John"

D"John Doe"

Step-by-Step Solution

Solution:

Step 1: Understand signal updates and computed recalculation
Changing firstName triggers fullName to recalculate using the new firstName value.
Step 2: Evaluate fullName after firstName.set('Jane')
fullName returns "Jane Doe" because lastName remains "Doe" and firstName is updated.
Final Answer:
"Jane Doe" -> Option B
Quick Check:
Computed reflects updated dependencies = "Jane Doe" [OK]

Quick Trick: Computed signals auto-update on dependency changes [OK]

Common Mistakes:

Assuming fullName stays "John Doe" after firstName changes
Thinking computed signals do not update automatically
Expecting an error due to missing manual update

Master "Signals" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given the code below, what will be the output of console.log(fullName()) after firstName.set('Jane') is called?

Step 1: Understand signal updates and computed recalculation

Step 2: Evaluate fullName after firstName.set('Jane')

Final Answer:

Quick Check:

Want More Practice?