Signal vs observable comparison in Angular - Hands-On Comparison

Signal vs Observable Comparison in Angular

📖 Scenario: You are building a simple Angular component to understand how signals and observables work for reactive data handling.This will help you see the difference in how Angular manages data changes with these two approaches.

🎯 Goal: Create an Angular standalone component that uses both a signal and an observable to track a counter value. Display both values in the template and update them with buttons.This will show how signals and observables behave differently in Angular.

📋 What You'll Learn

Create a signal called counterSignal initialized to 0

Create an observable called counterObservable$ that emits numbers starting from 0

Add buttons to increment counterSignal and counterObservable$

Display the current values of counterSignal and counterObservable$ in the template

💡 Why This Matters

🌍 Real World

Understanding signals and observables helps Angular developers manage reactive data flows efficiently in real applications like forms, live data feeds, and UI state.

💼 Career

Knowing when to use signals versus observables is important for Angular developers to write clean, performant, and maintainable reactive code.

1

Set up the Angular component with a signal

Create a standalone Angular component named SignalVsObservableComponent. Inside it, create a signal called counterSignal initialized to 0. Use import { Component, signal } from '@angular/core'. Include a simple template that displays counterSignal().

Angular

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

@Component({
  selector: 'app-signal-vs-observable',
  standalone: true,
  template: `
    Signal counter: {{ counterSignal() }}
    
  `
})
export class SignalVsObservableComponent {
  // Your code here
}

Need a hint?

Use signal(0) to create the signal and display it in the template with {{ counterSignal() }}.

2

Add an observable that emits counter values

Import Observable and interval from rxjs. Create a public observable called counterObservable$ that emits numbers starting from 0 every second using interval(1000). Add it to the component class.

Angular

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

@Component({
  selector: 'app-signal-vs-observable',
  standalone: true,
  template: `
    Signal counter: {{ counterSignal() }}
  `
})
export class SignalVsObservableComponent {
  counterSignal = signal(0);
  // Create counterObservable$ here
}

Need a hint?

Use interval(1000) to create an observable that emits every second.

3

Display the observable value in the template using async pipe

Update the component template to display the current value of counterObservable$ using Angular's async pipe. Add a paragraph showing Observable counter: {{ counterObservable$ | async }} below the signal counter.

Angular

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

@Component({
  selector: 'app-signal-vs-observable',
  standalone: true,
  template: `
    Signal counter: {{ counterSignal() }}
    
  `
})
export class SignalVsObservableComponent {
  counterSignal = signal(0);
  counterObservable$: Observable = interval(1000);
}

Need a hint?

Use {{ counterObservable$ | async }} in the template to show the observable's current value.

4

Add buttons to increment signal and observable manually

Add two buttons in the template: one labeled Increment Signal that calls a method incrementSignal(), and another labeled Increment Observable that calls incrementObservable(). Implement incrementSignal() to update counterSignal by adding 1. Implement incrementObservable() to emit the next number manually using a Subject instead of interval. Replace counterObservable$ with this Subject observable.

Angular

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

@Component({
  selector: 'app-signal-vs-observable',
  standalone: true,
  template: `
    Signal counter: {{ counterSignal() }}
    Observable counter: {{ counterObservable$ | async }}
    
  `
})
export class SignalVsObservableComponent {
  counterSignal = signal(0);
  counterObservable$: Observable;

  // Your code here
}

Need a hint?

Use a Subject to manually emit values for the observable. Update the signal with update(). Add buttons with (click) handlers.