Signals as modern state primitive in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a signal in Angular?

A signal is a special kind of variable that holds state and notifies the app when its value changes, allowing automatic updates in the UI.

beginner

How do you create a signal in Angular?

Use the <code>signal()</code> function from Angular to create a signal, for example: <code>const count = signal(0);</code>

intermediate

How do signals improve state management compared to traditional methods?

Signals automatically track dependencies and update only the parts of the UI that use the changed state, reducing manual subscriptions and improving performance.

beginner

What is the difference between a signal and a regular variable?

A regular variable does not notify the app when it changes, but a signal triggers updates wherever it is used, keeping the UI in sync automatically.

beginner

How can you update the value of a signal?

Use the set() method or call the signal as a function with a new value, for example: count.set(5); or count(5);

What does a signal in Angular do?

A Tracks state changes and updates the UI automatically

B Creates a new component

C Defines routes in the app

D Handles HTTP requests

Signals hold state and notify Angular to update the UI when the state changes.

Which function creates a signal in Angular?

A new Signal()

B useState()

C signal()

D createSignal()

Angular uses the signal() function to create signals.

How do you update a signal's value?

A Using set() or calling the signal as a function

B Directly assigning a new value like a normal variable

C Using updateSignal() method

D Signals cannot be updated

Signals provide set() method or can be called as functions to update their value.

Why are signals better than manual subscriptions?

A They require more code to manage

B They automatically track dependencies and update UI efficiently

C They slow down the app

D They replace CSS styling

Signals reduce boilerplate by auto-tracking and updating only what needs to change.

Which of these is NOT true about signals?

A Signals can be updated with set()

B Signals notify the app when their value changes

C Signals help keep UI in sync with state

D Signals are used to define routes

Signals are for state management, not routing.

Explain what signals are in Angular and how they help manage state.

Think about how signals replace manual subscriptions and keep UI updated.

Describe how to create and update a signal in Angular with simple code examples.

Focus on the syntax and methods to change signal values.

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