Signal vs observable comparison in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference in update behavior between Signal and Observable

In Angular, both Signals and Observables can be used to react to data changes. Which statement best describes how Signals differ from Observables in terms of update behavior?

A Signals require manual subscription to receive updates, while Observables update automatically without subscriptions.

B Signals emit multiple values over time asynchronously, while Observables hold a single synchronous value.

C Signals update synchronously and cache their latest value, while Observables emit asynchronously and do not cache values by default.

D Signals and Observables behave identically in update timing and caching.

💡 Hint

Think about how each handles the timing of updates and whether they keep the last value accessible.

Signals in Angular update synchronously and always hold the latest value, making them easy to read directly. Observables emit values asynchronously and do not cache the last value unless operators like shareReplay are used.

❓ component_behavior

intermediate

Component rendering with Signal vs Observable

Consider an Angular component that displays a counter value. The counter is provided as a Signal in one version and as an Observable in another. What difference in rendering behavior will you observe?

A The Signal-based component updates the view immediately on value change, while the Observable-based component requires an async pipe or subscription to update.

B The Observable-based component updates the view immediately without any extra code, while the Signal-based component needs manual subscription.

C Both components update the view only when manually triggered by a button click.

D Neither component updates the view automatically; both require manual change detection calls.

💡 Hint

Think about how Angular templates handle Signals and Observables differently.

Signals can be read directly in templates and update synchronously, so the view updates immediately. Observables require the async pipe or manual subscription to trigger view updates.

📝 Syntax

advanced

Correct syntax to create a Signal and an Observable

Which option shows the correct way to create a Signal and an Observable that emit numbers starting from 0 every second?

A

const countSignal = new Signal(0);
const countObservable = new Observable(1000);

B

const countSignal = signal(0);
const countObservable = interval(1000);

C

const countSignal = signal(() => 0);
const countObservable = interval();

D

const countSignal = signal(0, 1000);
const countObservable = Observable.interval(1000);

💡 Hint

Remember the Angular Signal creation function and RxJS interval syntax.

Signals are created with the signal function passing an initial value. Observables emitting values at intervals use RxJS's interval function with the interval in milliseconds.

🔧 Debug

advanced

Why does this Observable subscription not update the view?

Given this Angular component code snippet, why does the view not update when count$ emits new values?

count$ = interval(1000);

ngOnInit() {
  this.count$.subscribe(value => {
    this.currentCount = value;
  });
}

A Because the subscription is missing an unsubscribe, causing a memory leak and blocking updates.

B Because <code>subscribe</code> must be called inside the constructor, not ngOnInit.

C Because <code>interval</code> does not emit any values without a start call.

D Because <code>currentCount</code> is not a Signal, Angular does not detect changes automatically.

💡 Hint

Think about Angular's change detection and how it tracks changes to variables.

Angular's change detection does not automatically track changes to plain variables like currentCount. Using Signals or triggering change detection manually is needed to update the view.

❓ state_output

expert

Output of combined Signal and Observable updates

Consider this Angular component snippet:

const countSignal = signal(0);
const countObservable = interval(1000);

countObservable.subscribe(value => {
  countSignal.set(value);
});

console.log(countSignal());

What will be logged immediately after this code runs?

A 0

B 1

C undefined

D Throws an error because Signals cannot be set inside subscriptions

💡 Hint

Think about when the Observable emits its first value relative to the console.log call.

The Observable interval(1000) emits its first value after 1 second asynchronously. The console.log runs immediately, so the Signal still holds its initial value 0.

Practice

1. Which statement best describes an Angular signal compared to an observable?

easy

A. A signal requires manual subscription to receive updates.

B. A signal handles multiple asynchronous events over time.

C. A signal holds a single reactive value and updates UI automatically.

D. A signal is used only for HTTP requests.

Solution

1. Step 1: Understand what a signal represents

   Signals hold a single reactive value that updates the UI automatically when changed.

2. Step 2: Compare with observable behavior

   Observables handle streams of data over time and require subscriptions, unlike signals.

3. Final Answer:

   A signal holds a single reactive value and updates UI automatically. -> Option C

4. Quick Check:

   Signal = single reactive value [OK]

Hint: Signals hold one value; observables handle streams [OK]

Common Mistakes:

• Thinking signals handle multiple async events like observables
• Believing signals require subscriptions
• Confusing signals with HTTP request handlers

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

easy

A. const count = new Observable(0);

B. const count = signal(0);

C. const count = subscribe(0);

D. const count = createObservable(0);

Solution

1. Step 1: Recall Angular signal creation syntax

   Signals are created using the signal() function with an initial value.

2. Step 2: Identify incorrect options

   Observable creation uses new Observable(), subscribe is a method, and createObservable() is not valid.

3. Final Answer:

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

4. Quick Check:

   signal() creates signals [OK]

Hint: Use signal() function to create signals [OK]

Common Mistakes:

• Using new Observable() to create a signal
• Confusing subscribe() with signal creation
• Using non-existent createObservable() function

3. Given the code below, what will be logged to the console?

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

medium

A. 1

B. An error because signals cannot be set

C. undefined

D. 5

Solution

1. Step 1: Understand signal value update

   The signal is created with initial value 1, then updated to 5 using set().

2. Step 2: Check the value returned by calling the signal

   Calling count() returns the current value, which is 5 after set().

3. Final Answer:

   5 -> Option D

4. Quick Check:

   Signal value after set() = 5 [OK]

Hint: Calling signal() returns current value [OK]

Common Mistakes:

• Assuming initial value remains after set()
• Thinking signals cannot be updated
• Confusing signal() call with observable subscription

4. What is wrong with this Angular code using an observable?

const obs = new Observable(subscriber => {
  subscriber.next(1);
});
obs.next(2);

medium

A. Observables do not have a next() method on the instance.

B. Observable must be created with signal() instead.

C. Subscriber function cannot call next().

D. Observable must be subscribed before calling next().

Solution

1. Step 1: Understand Observable instance methods

   Observable instances do not have a next() method; next() is called on the subscriber inside the constructor.

2. Step 2: Identify misuse of next() outside subscriber

   Calling obs.next(2) is invalid and causes an error.

3. Final Answer:

   Observables do not have a next() method on the instance. -> Option A

4. Quick Check:

   next() is on subscriber, not observable instance [OK]

Hint: next() is called inside subscriber, not on observable [OK]

Common Mistakes:

• Trying to call next() on observable instance
• Confusing signal() with observable creation
• Believing subscription is needed before next()

5. You want to manage a simple counter state that updates the UI immediately when changed. Which approach is best and why?

Option A: Use a signal to hold the counter value.
Option B: Use an observable and subscribe to updates.
Option C: Use a Promise to fetch the counter value.
Option D: Use a BehaviorSubject without subscription.

hard

A. Signal is best because it holds a single reactive value and updates UI automatically.

B. Observable is best because it handles multiple async events efficiently.

C. Promise is best because it resolves once with the counter value.

D. BehaviorSubject without subscription updates UI automatically.

Solution

1. Step 1: Identify the requirement for simple immediate UI update

   A simple counter state that updates UI immediately fits the signal use case.

2. Step 2: Compare other options

   Observable requires subscription and is better for streams; Promise resolves once; BehaviorSubject needs subscription to update UI.

3. Final Answer:

   Signal is best because it holds a single reactive value and updates UI automatically. -> Option A

4. Quick Check:

   Simple state + auto UI update = signal [OK]

Hint: Use signals for simple reactive state, observables for streams [OK]

Common Mistakes:

• Choosing observable for simple state without subscription
• Using Promise for reactive UI updates
• Assuming BehaviorSubject updates UI without subscription