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.