Signal creation and reading in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a signal in Angular?

A signal is a reactive primitive that holds a value and notifies when the value changes. It helps Angular track and update the UI efficiently.

beginner

How do you create a signal in Angular?

Use the <code>signal()</code> function with an initial value, like <code>const count = signal(0);</code> to create a signal holding the number 0.

beginner

How do you read the current value of a signal?

You read the value by calling the signal as a function, for example, count() returns the current value stored in the signal.

intermediate

What happens when you update a signal's value?

When you update a signal's value by calling it with a new value, Angular automatically updates any UI or computations that depend on that signal.

intermediate

Why are signals useful in Angular?

Signals make it easy to manage state reactively without complex subscriptions. They keep the UI in sync with data changes automatically and efficiently.

How do you create a signal with an initial value of 10?

A const value = createSignal(10);

B const value = new Signal(10);

C const value = signal(10);

D const value = signal.value(10);

Use the signal() function with the initial value inside parentheses.

How do you get the current value stored in a signal named score?

A score.current

B score.value

C score.get()

D score()

Signals are functions; calling score() returns the current value.

What happens when you update a signal's value?

A Angular automatically updates all parts of the UI that use the signal.

B The signal value changes but UI updates only after a page reload.

C Nothing until you manually refresh the UI.

D You must call a separate update function to refresh the UI.

Signals notify Angular to update the UI automatically when their value changes.

Which of these is NOT a way to update a signal's value?

A Calling the signal with a new value like <code>count(5)</code>.

B Assigning directly like <code>count = 5</code>.

C Using a function to update like <code>count.update(v =&gt; v + 1)</code>.

D Using <code>count.set(5)</code>.

You cannot assign directly to the signal variable; you must use its methods or call it as a function.

Why might you choose signals over traditional Angular state management?

A Signals automatically track dependencies and update UI efficiently.

B Signals require more code and setup.

C Signals do not work with Angular templates.

D Signals are only for server-side rendering.

Signals simplify reactive state by tracking dependencies and updating UI automatically.

Explain how to create a signal and read its value in Angular.

Think about how you store and then get the value from a signal.

Describe what happens when you update a signal's value and why it is useful.

Consider how signals help keep your app's display fresh without extra work.

Practice

1. What does the signal function do in Angular?

easy

A. Registers a service for dependency injection

B. Defines a new Angular component

C. Creates a reactive value that can be read and updated

D. Starts an HTTP request

Solution

1. Step 1: Understand the purpose of signal

   The signal function is used to create reactive values that Angular tracks for changes.

2. Step 2: Identify what signal does

   It creates a value container that can be read by calling it and updated to trigger UI changes.

3. Final Answer:

   Creates a reactive value that can be read and updated -> Option C

4. Quick Check:

   Signal creation = reactive value container [OK]

Hint: Remember: signal() creates reactive values you can read and update [OK]

Common Mistakes:

• Confusing signal with component or service creation
• Thinking signal starts HTTP requests
• Assuming signal is for styling or templates

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

easy

A. const count = signal(10);

B. const count = Signal(10);

C. const count = signal = 10;

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

Solution

1. Step 1: Check the correct syntax for signal creation

   The correct syntax uses lowercase signal as a function with the initial value in parentheses.

2. Step 2: Compare options

   const count = signal(10); matches the correct syntax: const count = signal(10);. Others use wrong casing or invalid syntax.

3. Final Answer:

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

4. Quick Check:

   signal() function call with initial value [OK]

Hint: Use lowercase signal() with parentheses for initial value [OK]

Common Mistakes:

• Using uppercase Signal instead of signal
• Assigning signal = 10 instead of calling signal(10)
• Trying to call a create method on signal

3. Given this code:

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

What will be printed in the console?

medium

A. 5 then 10

B. 5 then 5

C. 10 then 10

D. Error because set() is not a function

Solution

1. Step 1: Read the initial signal value

   The signal count is created with initial value 5, so count() returns 5.

2. Step 2: Update the signal and read again

   Calling count.set(10) updates the value to 10, so the next count() returns 10.

3. Final Answer:

   5 then 10 -> Option A

4. Quick Check:

   Signal read before and after set() = 5, 10 [OK]

Hint: Remember: signal() reads, set() updates value [OK]

Common Mistakes:

• Thinking count() returns the same value after set()
• Assuming set() is not a valid method
• Confusing signal reading with direct variable access

4. Identify the error in this code snippet:

const name = signal('Alice');
console.log(name);
name('Bob');

medium

A. Cannot call signal variable as a function

B. Missing parentheses when reading signal value

C. Cannot assign new value by calling signal as function

D. Signal must be updated using name.set('Bob')

Solution

1. Step 1: Check how signal values are read and updated

   Signals are read by calling them as functions: name(). To update, use name.set(newValue).

2. Step 2: Identify the error in updating

   The code tries to update the signal by calling name('Bob'), which is invalid. The correct way is name.set('Bob').

3. Final Answer:

   Signal must be updated using name.set('Bob') -> Option D

4. Quick Check:

   Update signals with set() method [OK]

Hint: Use set() to update signals, not calling them as functions [OK]

Common Mistakes:

• Trying to update signal by calling it as a function
• Forgetting parentheses when reading signal value
• Confusing signal with normal variables

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

const numbers = signal([1, 2, 3]);
// Add 4 to numbers here

hard

A. numbers([...numbers(), 4]);

B. numbers.set([...numbers(), 4]);

C. numbers.value.push(4);

D. numbers = [...numbers(), 4];

Solution

1. Step 1: Understand how to read and update signals

   Read the current value by calling numbers(). To update, use numbers.set(newValue).

2. Step 2: Add 4 to the existing array immutably

   Create a new array with existing values plus 4: [...numbers(), 4]. Then update signal with numbers.set([...numbers(), 4]).

3. Final Answer:

   numbers.set([...numbers(), 4]); -> Option B

4. Quick Check:

   Update signal immutably with set([...signal(), newItem]) [OK]

Hint: Use set() with new array copy to update list signals [OK]

Common Mistakes:

• Trying to call signal as a function to update
• Mutating array directly without set()
• Assigning new array to signal variable directly