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.