Migrating from observables to signals in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Understanding signal updates vs observable subscriptions

Consider an Angular component migrating from an observable to a signal. Which behavior correctly describes how the component updates when the signal changes compared to the observable?

A Signals do not trigger component updates; only observables do.

B The component automatically re-renders when the signal value changes without manual subscription management.

C The component requires manual subscription and unsubscription to update when the signal changes.

D The component updates only when the signal is explicitly refreshed by calling a method.

💡 Hint

Think about how signals simplify reactive updates compared to observables.

Signals in Angular automatically notify the component to update when their value changes, removing the need for manual subscription management required by observables.

📝 Syntax

intermediate

Correct syntax for creating a signal from an observable

Which code snippet correctly creates a signal from an observable using Angular's toSignal function?

A const countSignal = countObservable.toSignal(0);

B const countSignal = toSignal(countObservable, 0);

C const countSignal = toSignal(countObservable, { initialValue: 0 });

D const countSignal = toSignal(countObservable);

💡 Hint

Check the correct way to pass options to toSignal.

The toSignal function takes the observable as the first argument and an options object as the second, where initialValue can be set.

🔧 Debug

advanced

Identifying the error when migrating observable subscription to signal

Given this Angular component code migrating from observable to signal, what error will occur?

import { Component, signal } from '@angular/core';
import { interval } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-timer',
  template: `{{ timer() }}`
})
export class TimerComponent {
  timer = toSignal(interval(1000));
}

A TypeError: toSignal requires an initialValue option for cold observables.

B SyntaxError: Missing parentheses in toSignal call.

C No error; the code works as expected.

D RuntimeError: interval is not a function.

💡 Hint

Consider what happens when converting a cold observable like interval to a signal.

The interval observable does not emit immediately, so toSignal requires an initialValue option to avoid errors.

❓ state_output

advanced

Result of signal value after observable emits

What is the value of countSignal() after 3 seconds given this code?

import { signal } from '@angular/core';
import { interval } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

const countObservable = interval(1000);
const countSignal = toSignal(countObservable, { initialValue: 0 });

setTimeout(() => {
  console.log(countSignal());
}, 3000);

A 2

B 0

C undefined

D Throws an error

💡 Hint

Remember how interval emits values every second starting from 0.

The interval observable emits 0 at 1000ms, 1 at 2000ms, 2 at 3000ms. The signal reflects the latest emitted value of 2.

🧠 Conceptual

expert

Key advantage of signals over observables in Angular migration

What is the main advantage of migrating from observables to signals in Angular applications?

A Signals allow multiple subscribers to share the same data stream more efficiently than observables.

B Signals replace the need for Angular templates by rendering directly in TypeScript.

C Signals enable asynchronous data fetching without any need for Angular lifecycle hooks.

D Signals provide automatic change detection and simpler state management without manual subscriptions.

💡 Hint

Think about how signals reduce boilerplate compared to observables.

Signals automatically trigger Angular's change detection when their value changes, simplifying state management by removing the need for manual subscriptions and unsubscriptions.

Practice

1. What is the main benefit of migrating from Observable to signal() in Angular?

easy

A. More complex code but better performance

B. Signals require manual subscription management

C. Simpler reactive data handling with automatic UI updates

D. Signals do not support reactive updates

Solution

1. Step 1: Understand the purpose of signals

   Signals in Angular provide a simpler way to handle reactive data by automatically updating the UI when the data changes.

2. Step 2: Compare with observables

   Observables require subscriptions and manual management, while signals reduce this complexity and improve performance.

3. Final Answer:

   Simpler reactive data handling with automatic UI updates -> Option C

4. Quick Check:

   Signals simplify reactivity = B [OK]

Hint: Signals auto-update UI, observables need subscriptions [OK]

Common Mistakes:

• Thinking signals require manual subscriptions
• Believing signals increase code complexity
• Assuming signals do not update UI reactively

2. Which of the following is the correct way to create a signal in Angular?

easy

A. const count = createSignal(0);

B. const count = new Signal(0);

C. const count = observable(0);

D. const count = signal(0);

Solution

1. Step 1: Recall Angular signal creation syntax

   Angular uses the signal() function to create reactive signals.

2. Step 2: Check options for correct syntax

   Only const count = signal(0); matches Angular's official syntax.

3. Final Answer:

   const count = signal(0); -> Option D

4. Quick Check:

   Use signal() function = C [OK]

Hint: Use signal() function, not new or createSignal [OK]

Common Mistakes:

• Using new Signal() instead of signal()
• Confusing with createSignal() from other frameworks
• Using observable() which is for RxJS

3. Given this Angular code migrating from observable to signal:

const count = signal(0);

function increment() {
  count.set(count() + 1);
}

increment();
increment();
console.log(count());

What will be logged to the console?

medium

A. 0

B. 2

C. undefined

D. 1

Solution

1. Step 1: Understand signal initial value and increments

   The signal count starts at 0. Each call to increment() adds 1.

2. Step 2: Calculate final value after two increments

   After two calls, count is 0 + 1 + 1 = 2.

3. Final Answer:

   2 -> Option B

4. Quick Check:

   0 + 2 increments = 2 [OK]

Hint: Signals hold value, use .set() and () to get value [OK]

Common Mistakes:

• Forgetting to call count() to get value
• Assuming count is immutable without .set()
• Confusing initial value with updated value

4. What is wrong with this migration from observable to signal?

const count = signal(0);

count.subscribe(value => console.log(value));

count.set(5);

medium

A. Signals do not have a subscribe method

B. You must call count() instead of count.set()

C. Signals require new keyword to create

D. count.set() does not update the signal value

Solution

1. Step 1: Check signal API differences from observables

   Signals do not have a subscribe method; that is an observable feature.

2. Step 2: Identify correct way to react to signal changes

   To react to signals, use computed signals or effects, not subscribe.

3. Final Answer:

   Signals do not have a subscribe method -> Option A

4. Quick Check:

   Signals lack subscribe() = A [OK]

Hint: Signals use effects, not subscribe() [OK]

Common Mistakes:

• Trying to subscribe to signals like observables
• Confusing signal() with observable()
• Using count() incorrectly as a setter

5. You have this observable-based Angular code:

count$ = new BehaviorSubject(0);

increment() {
  this.count$.next(this.count$.value + 1);
}

How would you migrate this to use signals correctly?

hard

A. const count = signal(0);

function increment() {
count.set(count() + 1);
}

B. const count = signal(0);

function increment() {
count = count() + 1;
}

C. const count = new signal(0);

function increment() {
count.set(count() + 1);
}

D. const count = signal(0);

function increment() {
count.next(count() + 1);
}

Solution

1. Step 1: Replace BehaviorSubject with signal()

   Use signal(0) to create a reactive value starting at 0.

2. Step 2: Update increment function to use .set()

   Use count.set(count() + 1) to update the signal's value correctly.

3. Final Answer:

   const count = signal(0); function increment() { count.set(count() + 1); } -> Option A

4. Quick Check:

   Use signal() and .set() to update = A [OK]

Hint: Use .set() to update signals, not assignment or next() [OK]

Common Mistakes:

• Trying to assign directly to signal variable
• Using new keyword with signal()
• Calling next() on a signal