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
}

Need a 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
}

Need a 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
  }
}

Need a 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);
    });
  }
}

Need a hint?

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