Signal creation and reading in Angular - Step-by-Step Execution

Concept Flow - Signal creation and reading

Create signal with initial value

↓

Signal holds current value

↓

Read signal value anywhere

↓

Use value in template or logic

↓

If signal changes -> dependent code updates

This flow shows how a signal is created with a starting value, then read anywhere in the code or template, and how changes to the signal update dependent parts automatically.

Execution Sample

Angular

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

const count = signal(0);

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

This code creates a signal with 0, reads and logs it, updates it to 5, then reads and logs the new value.

Execution Table

Step	Action	Signal Value Before	Operation	Signal Value After	Output
1	Create signal with 0	N/A	signal(0)	0	No output
2	Read signal value	0	count()	0	0
3	Update signal value	0	count.set(5)	5	No output
4	Read updated signal value	5	count()	5	5
5	End of code	5	N/A	5	Execution stops

💡 Signal value is 5, no more code to execute

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
count	N/A	0	0	5	5	5

Key Moments - 2 Insights

Why do we call count() to read the signal value instead of just using count?

Signals in Angular are functions. Calling count() executes the function to get the current value. See execution_table rows 2 and 4 where count() returns the value.

What happens when we use count.set(5)? Does it change the variable directly?

No, count.set(5) updates the internal value inside the signal. The variable count remains a function. This is shown in execution_table row 3 where the value changes from 0 to 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 4 when reading the signal?

A 5

B 0

C undefined

D Error

💡 Hint

Check the Output column at step 4 in the execution_table

At which step does the signal value change from 0 to 5?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at Signal Value After column in execution_table rows 2 and 3

If we forget to call count() and just log count, what would happen?

A It logs the current value

B It logs the signal function itself

C It throws an error

D It logs undefined

💡 Hint

Signals are functions, so logging count without () logs the function, not the value

Concept Snapshot

Signal creation and reading in Angular:
- Use signal(initialValue) to create a signal.
- Signals are functions; call them like count() to read value.
- Use count.set(newValue) to update the signal.
- Reading a signal triggers reactive updates.
- Signals hold state and notify dependents on change.

Full Transcript

In Angular, a signal is created by calling signal() with an initial value. This returns a function that holds the current value. To read the value, you call the signal function like count(). To update the value, you use count.set(newValue). When the signal changes, Angular automatically updates any code or template parts that depend on it. This example shows creating a signal with 0, reading it, updating to 5, and reading again. The key is remembering signals are functions, so you must call them to get the value.