What are Observables in Angular?

Observables are a fundamental part of Angular applications, extensively used for handling asynchronous data streams. They are a powerful feature from the RxJS library that Angular leverages for various tasks, including HTTP requests, event handling, and reactive programming.

What are Observables?

An Observable is a declarative way to handle asynchronous operations. It represents a stream of data or events that can be observed over time. Unlike Promises, which handle a single future value, Observables can emit multiple values over a period, making them suitable for continuous data streams.

Key Characteristics

• Lazy Execution: Observables do not execute until a consumer (subscriber) subscribes to them.
• Multiple Values: They can emit zero, one, or multiple values over time, unlike Promises which resolve with a single value.
• Push System: Observables push data to their subscribers, rather than subscribers pulling data.
• Cancellation: Subscriptions can be easily cancelled, preventing memory leaks and unnecessary work.

Core Components

Observable

The Observable itself is a function that connects an observer to a stream of values or events. It defines how to produce and push values to observers.

Observer (Subscriber)

An Observer is a collection of callbacks that knows how to react to values delivered by the Observable. It defines three methods: next() for handling emitted values, error() for handling errors, and complete() for handling the completion of the stream.

Subscription

A Subscription is the object returned when you subscribe to an Observable. It represents the ongoing execution of the Observable and has a unsubscribe() method to stop receiving notifications and clean up resources.

Operators

Operators are pure functions that allow you to compose complex asynchronous logic in a declarative manner. They take an Observable as input and return a new Observable, enabling transformations, filtering, and combining of data streams (e.g., map, filter, debounceTime).

Example: Creating and Subscribing

import { Observable } from 'rxjs';

// Create an Observable that emits numbers 1, 2, 3
const myObservable = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete(); // Signal that the stream has finished
  }, 1000);
});

// Subscribe to the Observable
console.log('Before subscribe');
const subscription = myObservable.subscribe({
  next(x) { console.log('Got value ' + x); },
  error(err) { console.error('Something wrong occurred: ' + err); },
  complete() { console.log('Done'); }
});
console.log('After subscribe');

// To unsubscribe later (e.g., in ngOnDestroy in Angular components)
// subscription.unsubscribe();

Common Use Cases in Angular

• HTTP Requests: The HttpClient in Angular returns Observables, making it easy to handle responses, errors, and chain requests.
• Event Handling: Listening to DOM events (e.g., fromEvent operator).
• Reactive Forms: Tracking value changes (valueChanges) and status changes (statusChanges) of form controls and groups.
• Router Events: Subscribing to router events to perform actions based on navigation lifecycle.
• State Management: In libraries like NgRx, Observables are central to managing application state.