LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2718 min read

RxJS & Observables Basics

Understand what an Observable is, how it differs from a Promise, and how to create and subscribe to one.

What Is an Observable?

An Observable represents a stream of values over time — it can emit zero, one, or many values, and can complete or error. RxJS (Reactive Extensions for JavaScript) is the library providing Observables and the operators to transform them, deeply integrated throughout Angular.

Observable vs Promise

PromiseObservable
ValuesResolves exactly onceCan emit zero, one, or many values over time
ExecutionStarts immediately when createdLazy — starts only when subscribed to
CancellationNot cancellableCancellable via unsubscribe()
ComposabilityChained with .then()Composed with a rich set of operators (map, filter, switchMap, etc.)

Creating an Observable

In practice, you rarely construct an Observable from scratch — HttpClient, the Router, and reactive forms all return them ready-made. But understanding the raw form clarifies what's happening underneath.

import { Observable } from 'rxjs';


const numbers$ = new Observable<number>((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});
The $ Suffix Convention

Naming an Observable-holding variable with a trailing $ (numbers$, posts$) is a widely followed RxJS convention, making it visually clear at a glance that a variable is a stream, not a plain value.

Subscribing and Unsubscribing

Nothing happens until .subscribe() is called — this is what makes Observables "lazy." The returned Subscription object's .unsubscribe() stops listening for further values.

const subscription = numbers$.subscribe({
  next: (value) => console.log(value),
  error: (err) => console.error(err),
  complete: () => console.log('Done!'),
});


subscription.unsubscribe();

Subjects

A Subject is both an Observable and something you can manually push values into — useful for broadcasting events (like a "user logged out" signal) that multiple parts of an app need to react to.

import { Subject } from 'rxjs';


@Injectable({ providedIn: 'root' })
export class NotificationService {
  private notificationSubject = new Subject<string>();
  notification$ = this.notificationSubject.asObservable();


  notify(message: string) {
    this.notificationSubject.next(message);
  }
}

Common Beginner Mistakes

Forgetting an Observable never runs until subscribed

Creating an Observable (or calling an HttpClient method) does nothing on its own — the actual work only starts on .subscribe().

Leaking a manual subscription

Any long-lived subscription (not a single HTTP response that completes on its own) needs a matching unsubscribe() in ngOnDestroy — the async pipe avoids this issue entirely for template-bound streams.

FAQs

You need enough to subscribe to HttpClient responses and use the async pipe comfortably — deep operator mastery is valuable but can be built up gradually as you encounter real needs.

No — it's a general-purpose reactive programming library usable in any JavaScript project, but Angular integrates it especially deeply throughout its core APIs.

Summary

Observables represent streams of values over time, are lazy until subscribed, and are cancellable — a more powerful (if more complex) tool than a Promise. Next, you'll learn the RxJS operators used most often in everyday Angular code.

Next Lesson →

Common RxJS Operators