Migrating from observables to signals in Angular - Deep Dive

Overview - Migrating from observables to signals

What is it?

Migrating from observables to signals in Angular means changing how your app handles reactive data. Observables are streams of data that you subscribe to and react when new values arrive. Signals are a newer way to track and react to data changes automatically without manual subscriptions. This migration helps simplify your code and improve performance by using Angular's built-in reactive system.

Why it matters

Without signals, Angular apps often rely on manual subscriptions and complex code to handle data changes, which can lead to bugs and harder maintenance. Signals provide a cleaner, more efficient way to react to data updates, making apps faster and easier to understand. Migrating helps developers write simpler code and avoid common pitfalls with observables.

Where it fits

Before migrating, you should understand Angular basics, especially observables and RxJS. After learning signals, you can explore Angular's new reactive features and advanced state management. This migration is part of modernizing Angular apps to use the latest framework improvements.

Mental Model

Core Idea

Signals automatically track and update data dependencies, replacing manual observable subscriptions with a simpler reactive model.

Think of it like...

It's like switching from manually watering each plant in your garden (observables) to installing an automatic sprinkler system (signals) that waters plants exactly when needed without extra effort.

┌───────────────┐       ┌───────────────┐
│  Observable   │──────▶│  Subscription │
│  (Data Stream)│       │  (Manual)     │
└───────────────┘       └───────────────┘
         │                      │
         ▼                      ▼
┌───────────────────────────────┐
│          Signals               │
│  (Automatic tracking & update)│
└───────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Observables in Angular

Concept: Observables are streams of data that emit values over time, and Angular uses them to handle asynchronous data.

Observables let you listen to data changes by subscribing to them. For example, HTTP requests or user input events are often handled with observables. You write code to subscribe and react when new data arrives.

Result

You can react to data changes by subscribing and running code when new values come in.

Understanding observables is essential because they are the current standard for reactive programming in Angular.

2

Foundation

What Are Signals in Angular?

Concept: Signals are a new reactive primitive that automatically track dependencies and update when data changes.

Signals hold a value and notify Angular when that value changes. Unlike observables, you don't subscribe manually; Angular tracks where signals are used and updates the UI or computations automatically.

Result

You get automatic updates in your app when signal values change, without manual subscriptions.

Signals simplify reactive code by removing the need for explicit subscriptions and unsubscriptions.

3

Intermediate

Comparing Observables and Signals

🤔Before reading on: do you think signals require manual subscription like observables? Commit to yes or no.

Concept: Signals differ from observables by automatically tracking usage and updating dependents without manual subscription management.

Observables require you to subscribe and unsubscribe to avoid memory leaks. Signals automatically track where their values are used and update those places when the value changes. This reduces boilerplate and potential bugs.

Result

You write less code and avoid common subscription mistakes.

Knowing this difference helps you understand why migrating to signals can make your code cleaner and safer.

4

Intermediate

Migrating Simple Observable Data

🤔Before reading on: do you think you can replace an observable with a signal by just changing the type? Commit to yes or no.

Concept: Migrating involves replacing observable streams with signals and updating how data is accessed and updated.

For example, if you have an observable for a user name, you create a signal holding the user name value instead. You update the signal directly instead of emitting new values through the observable.

Result

Your component accesses the signal's value directly, simplifying the code.

Understanding that signals hold current values directly helps you rewrite code more naturally than with observables.

5

Intermediate

Handling Async Data with Signals

🤔Before reading on: do you think signals can replace all observable async patterns? Commit to yes or no.

Concept: Signals can represent async data but require different patterns than observables for loading and error states.

Instead of subscribing to an observable, you can create signals for data, loading, and error states. You update these signals as async operations complete. Angular's async pipe for observables is replaced by direct signal usage in templates.

Result

Your UI reacts automatically to signal changes for loading and data states.

Knowing how to model async states with signals is key to fully migrating reactive data flows.

6

Advanced

Migrating Complex Observable Streams

🤔Before reading on: do you think signals can handle complex operators like map, filter, and combineLatest? Commit to yes or no.

Concept: Signals can compose and derive values but require different APIs than RxJS operators.

Instead of RxJS operators, you use computed signals to derive values from other signals. For example, to combine two signals, you create a computed signal that reads both and returns a combined result. This replaces operators like combineLatest.

Result

You achieve reactive compositions with simpler, more readable code.

Understanding computed signals unlocks the power of signals to replace complex observable logic.

7

Expert

Performance and Change Detection Benefits

🤔Before reading on: do you think signals improve Angular's change detection performance? Commit to yes or no.

Concept: Signals integrate deeply with Angular's change detection to update only affected parts efficiently.

Signals notify Angular precisely when their values change, so Angular only updates components or templates that depend on those signals. This fine-grained reactivity reduces unnecessary UI updates compared to observables with manual subscriptions.

Result

Your app runs faster and uses less CPU during updates.

Knowing how signals optimize change detection helps you write high-performance Angular apps.

Under the Hood

Signals internally keep track of where their values are read during component rendering or computations. When a signal's value changes, it notifies all dependents to update. This dependency tracking happens automatically without explicit subscription code. Angular's change detection listens to these notifications and updates the UI efficiently.

Why designed this way?

Signals were designed to simplify reactive programming by removing manual subscription management and to improve performance by enabling fine-grained change detection. Observables are powerful but require boilerplate and can cause memory leaks if not handled carefully. Signals provide a safer, more declarative approach aligned with Angular's rendering engine.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│   Signal      │──────▶│ Dependency    │──────▶│ Component/UI  │
│ (Value Store) │       │ Tracking      │       │ Updates       │
└───────────────┘       └───────────────┘       └───────────────┘
         ▲                      │                      ▲
         │                      │                      │
         └──────────────────────┴──────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do signals require manual unsubscription like observables? Commit to yes or no.

Common Belief: Signals need manual unsubscription to avoid memory leaks just like observables.

Reality: Signals automatically track dependencies and clean up when no longer used, so manual unsubscription is not needed.

Why it matters: Believing this leads to unnecessary code and confusion, missing one of signals' main benefits.

Quick: Can you use RxJS operators directly on signals? Commit to yes or no.

Common Belief: You can apply RxJS operators like map or filter directly on signals.

Reality: Signals use computed functions and their own APIs for derivation; RxJS operators do not work on signals.

Why it matters: Trying to use RxJS operators causes errors and blocks migration progress.

Quick: Are signals just a simpler syntax for observables? Commit to yes or no.

Common Belief: Signals are just a simpler way to write observables with less code.

Reality: Signals are a different reactive model with automatic dependency tracking and integration with Angular's change detection, not just syntax sugar.

Why it matters: Underestimating signals leads to missing their performance and safety advantages.

Quick: Do signals replace all uses of observables in Angular? Commit to yes or no.

Common Belief: Signals can replace every observable use case in Angular.

Reality: Some advanced observable features like multicasting or complex operators may still require observables or hybrid approaches.

Why it matters: Expecting full replacement can cause frustration and poor architecture decisions.

Expert Zone

1

Signals track dependencies at runtime during component rendering, enabling Angular to update only affected parts, which is more efficient than global change detection.

2

Computed signals cache their results and only recompute when dependencies change, preventing unnecessary calculations.

3

Signals can interoperate with observables by converting between them, allowing gradual migration and hybrid reactive patterns.

When NOT to use

Signals are not ideal when you need advanced RxJS features like multicasting, complex operators, or cancellation tokens. In such cases, continue using observables or combine signals with observables carefully.

Production Patterns

In real-world Angular apps, teams migrate simple state and UI data to signals first, then refactor complex streams into computed signals. They use signals for local component state and observables for global event streams, balancing simplicity and power.

Connections

Reactive Programming

Signals and observables are both reactive programming tools but use different models.

Understanding signals deepens your grasp of reactive programming by showing how automatic dependency tracking can simplify reactivity.

Functional Programming

Signals use pure functions and immutable data concepts similar to functional programming.

Knowing functional programming helps understand how computed signals derive values without side effects.

Spreadsheet Formulas

Signals work like spreadsheet cells that automatically update when dependent cells change.

This connection reveals how signals provide a declarative, automatic update mechanism similar to everyday tools.

Common Pitfalls

#1 Trying to subscribe to a signal like an observable.

Wrong approach:

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

Correct approach:

console.log(mySignal());

Root cause:

Confusing signals with observables and expecting the same API.

#2 Using RxJS operators directly on signals.

Wrong approach:

const filtered = mySignal.pipe(filter(x => x > 0));

Correct approach:

const filtered = computed(() => mySignal() > 0 ? mySignal() : null);

Root cause:

Assuming signals support RxJS operators without adaptation.

#3 Not updating signals correctly by assigning new values.

Wrong approach:

mySignal.value = newValue; // signals don't have 'value' property

Correct approach:

mySignal.set(newValue);

Root cause:

Misunderstanding the signal API for updating values.

Key Takeaways

Signals provide a simpler, automatic way to track and react to data changes in Angular, replacing manual observable subscriptions.

Migrating requires understanding that signals hold current values and update dependents automatically without RxJS operators.

Signals improve performance by enabling fine-grained change detection and reducing unnecessary UI updates.

Not all observable features map directly to signals; hybrid approaches may be needed for complex cases.

Mastering signals helps write cleaner, safer, and more efficient Angular applications.