Migrating from observables to signals in Angular - Mini Project: Build & Apply

Migrating from observables to signals in Angular

📖 Scenario: You have an Angular component that uses an observable to track a user's online status. You want to migrate this to use Angular signals for simpler and more reactive state management.

🎯 Goal: Refactor the component to replace the observable with a signal that updates the user's online status reactively.

📋 What You'll Learn

Create a user status observable with exact values

Add a signal to hold the online status

Subscribe to the observable to update the signal

Update the template to display the signal value

💡 Why This Matters

🌍 Real World

Many Angular apps use observables for state, but signals offer simpler, more efficient reactive updates. Migrating helps reduce boilerplate and improve readability.

💼 Career

Understanding signals and how to migrate from observables is valuable for modern Angular development and maintaining up-to-date codebases.

1

Create the user status observable

In the component class, create a variable called userStatus$ that is an observable emitting the boolean values true and false alternately using of(true, false) from rxjs.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-status',
  template: `User is online: {{ online }}`
})
export class StatusComponent {
  // Create userStatus$ observable here
}

Hint

Use of(true, false) to create the observable emitting true then false.

2

Add a signal to hold the online status

Import signal from @angular/core and create a signal called online initialized to false in the component class.

Angular

import { Component, signal } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-status',
  template: `User is online: {{ online }}`
})
export class StatusComponent {
  userStatus$ = of(true, false);
  // Create online signal initialized to false
}

Hint

Use signal(false) to create a signal holding the initial value false.

3

Subscribe to the observable to update the signal

Inside the component class constructor, subscribe to userStatus$ and update the online signal with the emitted values.

Angular

import { Component, signal } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-status',
  template: `User is online: {{ online }}`
})
export class StatusComponent {
  userStatus$ = of(true, false);
  online = signal(false);

  constructor() {
    // Subscribe to userStatus$ to update online signal
  }
}

Hint

Subscribe to userStatus$ and call this.online.set(status) inside the subscription.

4

Update the template to display the signal value

Modify the component template to display the current value of the online signal by calling it as a function inside the interpolation: {{ online() }}.

Angular

import { Component, signal } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-status',
  template: ``
})
export class StatusComponent {
  userStatus$ = of(true, false);
  online = signal(false);

  constructor() {
    this.userStatus$.subscribe(status => {
      this.online.set(status);
    });
  }
}

Hint

Use {{ online() }} in the template to show the signal's current value.

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