VisaSpark
Sign in
advanced20 min

RxJS Observables Fundamentals

What an Observable is, subscribing to one, and a simple operator chain.

What you'll learn

  • Explain what an Observable represents and why Angular uses RxJS heavily
  • Subscribe to an Observable to receive its emitted values
  • Predict the output of a simple map/filter operator chain over an Observable

Explanation

An Observable (from the RxJS library, which Angular uses heavily) represents a stream of values over time -- unlike a Promise, which resolves exactly once, an Observable can emit zero, one, or many values, and can be cancelled. Angular uses Observables for things like HTTP responses, route parameter changes, and form value changes.

You subscribe to an Observable to start receiving its values: observable.subscribe((value) => console.log(value)) -- nothing happens until you subscribe (Observables are "lazy" by default).

RxJS operators transform an Observable's stream, similar in spirit to array methods but over time: source.pipe(filter((n) => n % 2 === 0), map((n) => n * 10)) -- filter keeps only matching emitted values, map transforms each one, and pipe() chains operators together in order.

This lesson models a small, finite Observable (built from an array-like source via from()) so its emitted sequence is fully predictable -- real Observables (HTTP calls, user input) emit over genuinely unpredictable time, which is exactly why subscribing (not just calling a function once) is the right mental model.

Guided lab

Predict: An Observable operator chain's emitted values

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

Read this RxJS code and predict exactly what the subscriber logs, in order.

import { from } from "rxjs";
import { filter, map } from "rxjs/operators";

const numbers$ = from([1, 2, 3, 4, 5, 6]);

numbers$
  .pipe(
    filter((n) => n % 2 === 0),
    map((n) => n * 10),
  )
  .subscribe((value) => console.log(value));

Stuck? Get a hint.

Common mistakes

  • Forgetting an Observable does nothing until you .subscribe() to it -- unlike a Promise, which starts running as soon as it's created.
  • Confusing an Observable (can emit many values over time, cancellable) with a Promise (resolves exactly once, not cancellable).
  • Chaining operators in the wrong order and getting a different result than intended -- pipe() applies them in the order written.

Knowledge check

Knowledge check

1. How many values can an Observable emit, compared to a Promise?
2. When does an Observable start producing values?
3. What does pipe(filter(...), map(...)) do?

Takeaway

An Observable emits values over time and does nothing until subscribed to -- operators chained via pipe() transform the stream in the order written.

Summary

Observables (RxJS) represent streams of values over time, subscribed to (not called once like a Promise), and transformed with chained operators like filter/map via pipe().

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: HttpClient and API Calls →