Signal-based components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular signal-based component?

Consider this Angular standalone component using signals. What will be displayed when the component renders?

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 A button labeled 'Increment' and a paragraph showing 'Count: 0' but does not update on clicks.

B A button labeled 'Increment' but no count is displayed.

C A button labeled 'Increment' and a paragraph showing 'Count: 1' initially, increasing by 1 each click.

D A button labeled 'Increment' and a paragraph showing 'Count: 0' initially, increasing by 1 each click.

💡 Hint

Remember that signals hold reactive values and the template calls the signal as a function to get the current value.

The signal count starts at 0. The template calls count() to get the current value. Clicking the button calls increment(), which updates the signal by adding 1. The displayed count updates reactively.

❓ state_output

intermediate

What is the value of the signal after these updates?

Given this Angular component using signals, what is the final value of status() after the code runs?

Angular

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

@Component({
  selector: 'app-status',
  standalone: true,
  template: `<p>Status: {{ status() }}</p>`
})
export class StatusComponent {
  status = signal('idle');

  constructor() {
    this.status.set('loading');
    this.status.update(s => s + '...');
    this.status.set('done');
  }
}

A 'done'

B 'loading...'

C 'idle'

D 'done...'

💡 Hint

Signals update immediately when set or updated. The last set call determines the final value.

The signal status starts as 'idle'. It is set to 'loading', then updated to 'loading...', then finally set to 'done'. The last set call overwrites previous values, so the final value is 'done'.

📝 Syntax

advanced

Which option causes a syntax error in signal usage?

Identify which code snippet will cause a syntax error when defining or updating a signal in Angular.

A

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

B

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

C

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

D

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

💡 Hint

Remember that set expects a value, not a signal function or signal itself.

Option B tries to set the signal to count + 1, but count is a signal function, not a number. This causes a type error, which is a syntax misuse here.

🔧 Debug

advanced

Why does this signal not update the template?

Given this Angular component, 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 component is missing the @Injectable decorator.

💡 Hint

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

The template uses {{ count }} which prints the signal function itself, not its value. It should use {{ count() }} to get the current value and update reactively.

🧠 Conceptual

expert

What happens if you update a signal inside a signal's computed function?

Consider this Angular code snippet using signals and computed signals. What will happen when the component initializes?

Angular

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

@Component({
  selector: 'app-loop',
  standalone: true,
  template: `<p>Value: {{ value() }}</p>`
})
export class LoopComponent {
  count = signal(0);
  value = computed(() => {
    if (this.count() < 3) {
      this.count.update(c => c + 1);
    }
    return this.count();
  });
}

A The component will render 'Value: 0' because updates inside computed are ignored.

B The component will render 'Value: 3' after incrementing count three times without errors.

C The component will cause a runtime error due to infinite signal update loop.

D The component will render 'Value: 1' and stop updating.

💡 Hint

Signals and computed functions should not cause side effects like updating signals inside computed.

Updating a signal inside a computed signal causes the computed to re-run, which triggers another update, creating an infinite loop and runtime error.

Practice

1. What is the primary purpose of using signal() in Angular signal-based components?

easy

A. To create a CSS style binding

B. To define a new Angular module

C. To handle HTTP requests

D. To create reactive data that updates the UI automatically

Solution

1. Step 1: Understand what signal() does

   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 without manual intervention.

3. Final Answer:

   To create reactive data that updates the UI automatically -> Option D

4. Quick Check:

   signal() creates reactive data = D [OK]

Hint: Remember: signal() means reactive data for UI updates [OK]

Common Mistakes:

• Confusing signal() with module or HTTP functions
• Thinking signal() handles styling
• Assuming signal() is for event handling

2. Which of the following is the correct way to update a signal value named count in Angular?

easy

A. set(count, 5);

B. count = 5;

C. count.set(5);

D. update(count, 5);

Solution

1. Step 1: Recall the signal update method

   Signals have a set() method to assign a new value.

2. Step 2: Check the syntax for updating count

   The correct syntax is count.set(5); to update the signal value.

3. Final Answer:

   count.set(5); -> Option C

4. Quick Check:

   Use set() method to update signals = A [OK]

Hint: Use .set() to change signal values, not direct assignment [OK]

Common Mistakes:

• Trying to assign directly like a normal variable
• Using update() instead of set() incorrectly
• Calling set() as a standalone function

3. Given this Angular signal-based component code:

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

What will be printed in the console?

medium

A. 1

B. 0

C. undefined

D. Error

Solution

1. Step 1: Understand initial signal value

   The signal count starts at 0.

2. Step 2: Evaluate the update expression

   count.set(count() + 1); reads current value 0, adds 1, sets new value 1.

3. Step 3: Check the console output

   console.log(count()); prints the updated value 1.

4. Final Answer:

   1 -> Option A

5. Quick Check:

   Initial 0 + 1 = 1 printed = B [OK]

Hint: Remember to call signal() to get value, then set() to update [OK]

Common Mistakes:

• Forgetting to call count() to get value
• Expecting 0 because of no visible loop
• Confusing set() with update()

4. Identify the error in this Angular signal-based component snippet:

const name = signal('Alice');
name.update('Bob');

medium

A. Signals cannot hold string values

B. Using update() with a direct value instead of a function

C. Missing parentheses after signal()

D. name should be declared with let, not const

Solution

1. Step 1: Check usage of update() method

   update() expects a function to modify the current value, not a direct value.

2. Step 2: Identify the incorrect argument

   Passing 'Bob' directly causes an error; it should be name.update(value => 'Bob') or use set().

3. Final Answer:

   Using update() with a direct value instead of a function -> Option B

4. Quick Check:

   update() needs a function argument = C [OK]

Hint: update() requires a function, set() accepts direct value [OK]

Common Mistakes:

• Passing direct value to update() instead of a function
• Confusing update() and set() usage
• Thinking signals can't hold strings

5. You want to create a signal-based Angular component that tracks a list of tasks and adds a new task reactively. Which approach correctly updates the tasks signal when adding a new task "Learn Signals"?

hard

A. tasks.set([...tasks(), 'Learn Signals']);

B. tasks.update(tasks.push('Learn Signals'));

C. tasks = [...tasks(), 'Learn Signals'];

D. tasks.set(tasks.push('Learn Signals'));

Solution

1. Step 1: Understand signal holding an array

   The signal tasks holds an array, accessed by calling tasks().

2. Step 2: Correctly add a new task immutably

   Use spread syntax to create a new array with existing tasks plus the new one, then set it with tasks.set().

3. Step 3: Identify incorrect options

   Options B and D misuse push() which returns length, not array; C assigns directly, breaking reactivity.

4. Final Answer:

   tasks.set([...tasks(), 'Learn Signals']); -> Option A

5. Quick Check:

   Use set() with new array copy = A [OK]

Hint: Use set() with new array copy, never push() directly on signal [OK]

Common Mistakes:

• Using push() inside update() or set() incorrectly
• Assigning directly to signal variable
• Not creating a new array copy for immutability