Signal vs observable comparison in Angular

Introduction

Signals and observables both help manage changing data in Angular apps. They let your app react when data updates, but they work in different ways.

When you want simple, automatic updates in your UI with less code, use signals.

When you need to handle streams of data over time, like user input or HTTP responses, use observables.

When you want to combine or transform multiple data sources reactively, observables are helpful.

When you want easy state tracking with minimal setup, signals are a good choice.

When you need advanced features like cancellation or retry logic, observables are better.

Syntax

Angular

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

// Signal example
const count = signal(0);

// Observable example
const count$ = new Observable(subscriber => {
  subscriber.next(0);
  subscriber.complete();
});

Signals hold a single value and update automatically when changed.

Observables represent streams of values over time and require subscription.

Examples

This shows a signal holding a name. You update it with set and read it by calling it like a function.

Angular

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

const name = signal('Alice');

name.set('Bob');
console.log(name());

This shows an observable emitting a single value. You get the value by subscribing and providing a function.

Angular

import { of } from 'rxjs';

const name$ = of('Alice');

name$.subscribe(value => console.log(value));

Signals can be updated with update which takes a function to change the current value.

Angular

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

const counter = signal(0);
counter.update(c => c + 1);
console.log(counter());

Observables can emit multiple values over time, like a timer emitting every second.

Angular

import { interval } from 'rxjs';

const timer$ = interval(1000);
timer$.subscribe(val => console.log(val));

Sample Program

This Angular component shows a signal and an observable count side by side. The signal updates only when you click the button. The observable count updates every second automatically.

Angular

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

@Component({
  selector: 'app-root',
  template: `
    <h2>Signal count: {{ count() }}</h2>
    <h2>Observable count: {{ observableCount }}</h2>
    <button (click)="incrementSignal()">Increment Signal</button>
  `
})
export class AppComponent {
  count = signal(0);
  observableCount = 0;

  constructor() {
    interval(1000).subscribe(val => {
      this.observableCount = val;
    });
  }

  incrementSignal() {
    this.count.update(c => c + 1);
  }
}

Important Notes

Signals are simpler and built into Angular for state tracking.

Observables are more powerful for complex async streams but need subscriptions.

Use signals for local state and observables for event streams or HTTP data.

Summary

Signals hold a single reactive value and update UI automatically.

Observables handle streams of data over time and require subscribing.

Choose signals for simple state, observables for complex async data.