Signals as modern state primitive in Angular - Step-by-Step Execution

Concept Flow - Signals as modern state primitive

Create signal with initial value

↓

Read signal value in template or code

↓

Update signal value with set()

↓

Signal notifies dependents

↓

UI or computed values re-evaluate

↓

User sees updated UI

Signals hold state and notify Angular when their value changes, triggering UI updates automatically.

Execution Sample

Angular

import { signal } from '@angular/core';

const count = signal(0);

count.set(1);
console.log(count());

This code creates a signal holding 0, updates it to 1, then logs the current value.

Execution Table

Step	Action	Signal Value Before	Signal Value After	Effect
1	Create signal with initial value 0	N/A	0	Signal initialized
2	Read signal value with count()	0	0	Returns current value 0
3	Update signal value with count.set(1)	0	1	Signal value updated, dependents notified
4	Read signal value again with count()	1	1	Returns updated value 1

💡 No more actions; signal holds value 1 and UI would update accordingly

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count	undefined	0	1	1

Key Moments - 3 Insights

Why do we call count() to read the signal value instead of accessing a property?

Signals are functions in Angular; calling count() returns the current value as shown in execution_table step 2 and 4.

What happens when we call count.set(1)? Does it immediately update the UI?

Calling set(1) updates the signal value and notifies dependents (step 3). Angular then schedules UI updates automatically.

Can we directly assign a new value to count like count = 2?

No, count is a signal function, not a variable. Use count.set(2) to update the value as shown in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the signal value after step 3?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'Signal Value After' column for step 3 in the execution_table.

At which step does the signal notify dependents about the value change?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the 'Effect' column mentioning dependents notification in the execution_table.

If we replace count.set(1) with count.set(5), what changes in the variable_tracker?

A The final value of count becomes 5

B The start value changes to 5

C The value after step 1 changes to 5

D No change in variable_tracker

💡 Hint

Variable tracker shows signal value changes after set() calls; changing set value updates final.

Concept Snapshot

Signals are functions holding state in Angular.
Create with signal(initialValue).
Read value by calling signal(), e.g. count().
Update with signal.set(newValue).
Updates notify Angular to refresh UI automatically.

Full Transcript

Signals in Angular are a modern way to hold and manage state. You create a signal with an initial value using signal(). To read the current value, you call the signal as a function, like count(). To update the value, you use count.set(newValue). When the value changes, Angular automatically updates the UI where the signal is used. This makes state management simple and reactive without complex code.

Practice

1. What is the main purpose of using signal() in Angular?

easy

A. To style elements dynamically

B. To create a reactive state value that updates the UI automatically

C. To handle HTTP requests

D. To define a new component

Solution

1. Step 1: Understand the role of signal()

   signal() creates a reactive value that Angular tracks for changes.

2. Step 2: Connect signal() to UI updates

   When the signal value changes, Angular automatically updates the UI where it is used.

3. Final Answer:

   To create a reactive state value that updates the UI automatically -> Option B

4. Quick Check:

   signal() creates reactive state [OK]

Hint: Signals hold reactive values that auto-update UI [OK]

Common Mistakes:

• Confusing signals with components
• Thinking signals handle HTTP
• Assuming signals are for styling

2. Which of the following is the correct way to create a signal with initial value 10 in Angular?

easy

A. const count = signal(10);

B. const count = new Signal(10);

C. const count = createSignal(10);

D. const count = signal.set(10);

Solution

1. Step 1: Recall the syntax for creating signals

   Angular uses signal(initialValue) to create a signal with a starting value.

2. Step 2: Check each option's syntax

   Only const count = signal(10); matches the correct syntax. Others use incorrect constructors or methods.

3. Final Answer:

   const count = signal(10); -> Option A

4. Quick Check:

   signal() creates with initial value [OK]

Hint: Use signal(value) to create signals [OK]

Common Mistakes:

• Using new keyword with signal
• Calling non-existent createSignal function
• Trying to set value during creation

3. Given the code:

const count = signal(0);
count.set(5);
console.log(count());

What will be printed in the console?

medium

A. 5

B. 0

C. undefined

D. Error: count is not a function

Solution

1. Step 1: Understand signal creation and update

   The signal count starts at 0, then set(5) changes its value to 5.

2. Step 2: Reading the signal value

   Calling count() returns the current value, which is 5 after the update.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   count.set(5) updates value, count() reads it [OK]

Hint: Use count() to read updated signal value [OK]

Common Mistakes:

• Thinking count() returns initial value
• Confusing set() with reading value
• Assuming count is not callable

4. Identify the error in this Angular signal code:

const name = signal('Alice');
name.update(name + ' Smith');

medium

A. Incorrect initial value type for signal

B. Missing parentheses when calling signal()

C. Using update() with a string instead of a function

D. Using set() instead of update()

Solution

1. Step 1: Understand update() usage

   update() expects a function that receives the current value and returns the new value.

2. Step 2: Analyze the code's argument to update()

   The code passes name + ' Smith' which is a string, not a function, causing an error.

3. Final Answer:

   Using update() with a string instead of a function -> Option C

4. Quick Check:

   update() needs a function argument [OK]

Hint: Pass a function to update(), not a direct value [OK]

Common Mistakes:

• Passing value directly to update()
• Confusing set() and update() usage
• Ignoring function argument requirement

5. You want to create a signal that holds a list of numbers and add a new number to it reactively. Which code correctly updates the signal to add number 7?

hard

A. numbers.push(7);

B. numbers.set(numbers() + 7);

C. numbers = signal([...numbers(), 7]);

D. numbers.update(list => [...list, 7]);

Solution

1. Step 1: Understand how to update array signals

   Signals hold values immutably; to add an item, create a new array with the old items plus the new one.

2. Step 2: Check each option's correctness

   numbers.update(list => [...list, 7]); uses update() with a function that returns a new array including 7, which is correct.
   numbers.set(numbers() + 7); tries to add 7 to an array directly, causing a type error.
   numbers = signal([...numbers(), 7]); tries to reassign the signal variable, which is incorrect.
   numbers.push(7); calls push() on the signal itself, which is not valid.

3. Final Answer:

   numbers.update(list => [...list, 7]); -> Option D

4. Quick Check:

   Use update() with function returning new array [OK]

Hint: Use update(fn) to immutably add items to array signals [OK]

Common Mistakes:

• Trying to mutate signal value directly
• Reassigning signal variable instead of updating
• Using set() with wrong value type