Migrating from observables to signals in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main difference between observables and signals in Angular?

Observables are streams of asynchronous data that you subscribe to, while signals are reactive values that automatically update when their dependencies change, without explicit subscriptions.

beginner

How do you create a signal in Angular?

You use the `signal()` function from Angular's reactivity package, passing the initial value, like: `const count = signal(0);`

intermediate

Why might you want to migrate from observables to signals in Angular?

Signals simplify state management by reducing boilerplate code, avoiding manual subscriptions, and improving performance with fine-grained reactivity.

intermediate

What Angular function replaces subscribing to an observable when using signals?

You use `toSignal()` to convert an observable into a signal, which automatically updates when the observable emits new values.

beginner

How do you update the value of a signal?

You call the signal as a function with the new value, like `count(5)`, or use an updater function like `count(current => current + 1)`.

Which Angular function converts an observable into a signal?

A convertObservable()

B fromSignal()

C toSignal()

D signalify()

The `toSignal()` function converts an observable into a signal that updates automatically.

What do you NOT need to do when using signals compared to observables?

A Use Angular imports

B Update the value

C Create reactive values

D Manually unsubscribe

Signals handle updates automatically and do not require manual unsubscription like observables.

How do you read the current value of a signal?

A Subscribe to the signal

B Call the signal as a function with no arguments

C Use signal.value property

D Use signal.get() method

You get the current value by calling the signal as a function without arguments, e.g., `count()`.

What is a key benefit of signals over observables?

A Less boilerplate and automatic updates

B More manual control over subscriptions

C They work only with HTTP requests

D They require external libraries

Signals reduce boilerplate and update automatically without manual subscriptions.

When migrating, what should you replace in your Angular code?

A Replace observable subscriptions with signals using toSignal()

B Replace signals with observables

C Remove all reactive code

D Use promises instead of signals

Migrating means replacing observable subscriptions with signals by converting observables using `toSignal()`.

Explain how you would migrate an Angular component from using an observable to using a signal.

Think about how signals automatically update and remove the need for subscriptions.

Describe the advantages of using signals instead of observables in Angular applications.

Focus on developer experience and app performance improvements.

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