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
}

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
}

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

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
}

Hint

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

Practice

1. Which statement best describes an Angular signal compared to an observable?

easy

A. A signal requires manual subscription to receive updates.

B. A signal handles multiple asynchronous events over time.

C. A signal holds a single reactive value and updates UI automatically.

D. A signal is used only for HTTP requests.

Solution

1. Step 1: Understand what a signal represents

   Signals hold a single reactive value that updates the UI automatically when changed.

2. Step 2: Compare with observable behavior

   Observables handle streams of data over time and require subscriptions, unlike signals.

3. Final Answer:

   A signal holds a single reactive value and updates UI automatically. -> Option C

4. Quick Check:

   Signal = single reactive value [OK]

Hint: Signals hold one value; observables handle streams [OK]

Common Mistakes:

• Thinking signals handle multiple async events like observables
• Believing signals require subscriptions
• Confusing signals with HTTP request handlers

2. Which of the following is the correct way to create a signal in Angular?

easy

A. const count = new Observable(0);

B. const count = signal(0);

C. const count = subscribe(0);

D. const count = createObservable(0);

Solution

1. Step 1: Recall Angular signal creation syntax

   Signals are created using the signal() function with an initial value.

2. Step 2: Identify incorrect options

   Observable creation uses new Observable(), subscribe is a method, and createObservable() is not valid.

3. Final Answer:

   const count = signal(0); -> Option B

4. Quick Check:

   signal() creates signals [OK]

Hint: Use signal() function to create signals [OK]

Common Mistakes:

• Using new Observable() to create a signal
• Confusing subscribe() with signal creation
• Using non-existent createObservable() function

3. Given the code below, what will be logged to the console?

const count = signal(1);
count.set(5);
console.log(count());

medium

A. 1

B. An error because signals cannot be set

C. undefined

D. 5

Solution

1. Step 1: Understand signal value update

   The signal is created with initial value 1, then updated to 5 using set().

2. Step 2: Check the value returned by calling the signal

   Calling count() returns the current value, which is 5 after set().

3. Final Answer:

   5 -> Option D

4. Quick Check:

   Signal value after set() = 5 [OK]

Hint: Calling signal() returns current value [OK]

Common Mistakes:

• Assuming initial value remains after set()
• Thinking signals cannot be updated
• Confusing signal() call with observable subscription

4. What is wrong with this Angular code using an observable?

const obs = new Observable(subscriber => {
  subscriber.next(1);
});
obs.next(2);

medium

A. Observables do not have a next() method on the instance.

B. Observable must be created with signal() instead.

C. Subscriber function cannot call next().

D. Observable must be subscribed before calling next().

Solution

1. Step 1: Understand Observable instance methods

   Observable instances do not have a next() method; next() is called on the subscriber inside the constructor.

2. Step 2: Identify misuse of next() outside subscriber

   Calling obs.next(2) is invalid and causes an error.

3. Final Answer:

   Observables do not have a next() method on the instance. -> Option A

4. Quick Check:

   next() is on subscriber, not observable instance [OK]

Hint: next() is called inside subscriber, not on observable [OK]

Common Mistakes:

• Trying to call next() on observable instance
• Confusing signal() with observable creation
• Believing subscription is needed before next()

5. You want to manage a simple counter state that updates the UI immediately when changed. Which approach is best and why?

Option A: Use a signal to hold the counter value.
Option B: Use an observable and subscribe to updates.
Option C: Use a Promise to fetch the counter value.
Option D: Use a BehaviorSubject without subscription.

hard

A. Signal is best because it holds a single reactive value and updates UI automatically.

B. Observable is best because it handles multiple async events efficiently.

C. Promise is best because it resolves once with the counter value.

D. BehaviorSubject without subscription updates UI automatically.

Solution

1. Step 1: Identify the requirement for simple immediate UI update

   A simple counter state that updates UI immediately fits the signal use case.

2. Step 2: Compare other options

   Observable requires subscription and is better for streams; Promise resolves once; BehaviorSubject needs subscription to update UI.

3. Final Answer:

   Signal is best because it holds a single reactive value and updates UI automatically. -> Option A

4. Quick Check:

   Simple state + auto UI update = signal [OK]

Hint: Use signals for simple reactive state, observables for streams [OK]

Common Mistakes:

• Choosing observable for simple state without subscription
• Using Promise for reactive UI updates
• Assuming BehaviorSubject updates UI without subscription