Signals as modern state primitive in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding signal updates in Angular 17+

Given the following Angular component using signals, what will be the rendered output after clicking the button twice?

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button><p>Count: {{ count() }}</p>`
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

A Count: 2

B Count: 1

C Count: 0

D Count: NaN

💡 Hint

Remember that each click calls the increment method which updates the signal by adding 1.

The signal count starts at 0. Each button click calls increment() which updates the signal by adding 1. After two clicks, the count becomes 2 and the template reflects this.

❓ state_output

intermediate

Signal derived state behavior

What is the value of fullName() after the following code runs?

Angular

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

const firstName = signal('Jane');
const lastName = signal('Doe');
const fullName = computed(() => `${firstName()} ${lastName()}`);

firstName.set('John');

A "John Jane"

B "Doe John"

C "Jane Doe"

D "John Doe"

💡 Hint

Signals update reactively, so computed values reflect the latest signal states.

The firstName signal is updated to 'John'. The fullName computed signal reacts to this change and returns 'John Doe'.

📝 Syntax

advanced

Identify the syntax error in signal usage

Which option contains a syntax error when declaring and updating a signal in Angular?

A

const count = signal(0);
count.set(count() + 1);

B

const count = signal(0);
count.update(c => c + 1);

C

const count = signal(0);
count = 1;

D

;)1 + c >= c(etadpu.tnuoc
;)0(langis = tnuoc tsnoc

💡 Hint

Signals are immutable references; you cannot assign a new value directly to the signal variable.

Option C tries to assign a number directly to the signal variable count, which is not allowed. Signals must be updated using set() or update() methods.

🔧 Debug

advanced

Why does the signal not update the template?

Consider this Angular component code. Why does the displayed count not update when the button is clicked?

Angular

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

@Component({
  selector: 'app-broken-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button><p>Count: {{ count }}</p>`
})
export class BrokenCounterComponent {
  count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

A The template uses {{ count }} instead of calling the signal as a function {{ count() }}.

B The signal is not initialized properly with signal(0).

C The increment method does not update the signal correctly.

D The button click event is not bound properly.

💡 Hint

Signals are functions and must be called to get their current value in templates.

The template tries to display count directly, but signals are functions and must be called with parentheses like count() to get their value. Without calling, Angular does not track changes.

🧠 Conceptual

expert

Signal behavior with nested updates

What will be the final value of counter() after running this code snippet?

Angular

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

const counter = signal(0);

counter.update(c => {
  counter.update(c2 => c2 + 1);
  return c + 1;
});

A 0

B 1

C 2

D Throws an error due to nested updates

💡 Hint

Consider how nested update calls affect the signal's value sequentially.

The outer update reads the current value 0 as c. Inside the callback, the inner update reads the current value (still 0), computes 1, and sets the signal to 1. The outer callback then returns c + 1 = 1, and the outer update sets the signal to 1. Final value is 1.

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