Angular Observables

Observables

Observables offer support for passing messages between publishers and subscribers in Angular applications, with significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.

Observables are similar to promises but with key differences - Observables emit multiple values over time, while a Promise always returns one value or one error. The HTTP client and EventEmitter are based on Observables. In Angular 21, Observables and Signals complement each other: use Observables for async streams and HTTP, and Signals for synchronous reactive state.

The handler for receiving Observable notifications implements the Observer interface, which defines callback methods for three notification types:

next:- Called when the Observable emits a new value.

error:- Called when the Observable encounters an error.

complete:- Called when the Observable has finished emitting values.

Observable Example

Creating and subscribing to an Observable manually:

Observable Basics

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, interval, Subscription } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>Tick: {{ tick }}</p>
    <button (click)="start()">Start</button>
    <button (click)="stop()">Stop</button>
  `
})
export class AppComponent implements OnInit, OnDestroy {
  tick = 0;
  private sub?: Subscription;

  ngOnInit() { }

  start() {
    this.sub = interval(1000).pipe(
      map(n => n + 1),
      take(10)
    ).subscribe({
      next:     v => this.tick = v,
      error:    e => console.error(e),
      complete: () => console.log('Done!')
    });
  }

  stop() { this.sub?.unsubscribe(); }

  ngOnDestroy() { this.sub?.unsubscribe(); }
}

Observables vs Signals (Angular 21)

Angular 21 uses both RxJS Observables and Signals. Understanding when to use each is important:

Feature	Observables (RxJS)	Signals
Best for	Async streams, HTTP, events	Synchronous reactive state
Multiple values	Yes	Yes (via computed)
Lazy	Yes	No (eager)
Subscription needed	Yes	No
Template usage	With async pipe	Direct call: {{ mySignal() }}

Converting Observables to Signals with toSignal()

Angular provides the toSignal() function to convert an Observable into a Signal, making it easy to use HTTP responses and other async data with the Signals system:

toSignal() Example

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';

interface Post { id: number; title: string; }

@Component({
  selector: 'app-posts',
  standalone: true,
  template: `
    @for (post of posts(); track post.id) {
      <p>{{ post.id }}. {{ post.title }}</p>
    }
  `
})
export class PostsComponent {
  private http = inject(HttpClient);

  // Observable converted to Signal - no subscribe() needed
  posts = toSignal(
    this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts?_limit=5'),
    { initialValue: [] }
  );
}

Previous Next

Angular Observables

Observables

Observable Example

Observables vs Signals (Angular 21)

Converting Observables to Signals with toSignal()

Ready to Level Up Your Skills?