Angular Academy · Lesson

Subjects and BehaviorSubject

Multicast values with subjects.

Subjects and BehaviorSubject is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is a Subject

A Subject is both an Observable and an Observer. You can subscribe to it and also push values into it with next(). It multicasts: all subscribers receive the same emissions.

Creating and using a Subject

Subscribers added after a value is emitted will not receive past values.

import { Subject } from 'rxjs';

const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));

events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: world

Subjects are multicast

Unlike a cold observable that runs separately per subscriber, a Subject shares a single execution. Every subscriber gets the same value at the same time.

BehaviorSubject

A BehaviorSubject requires an initial value and remembers the latest value. New subscribers immediately receive the current value.

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)

Reading the current value

BehaviorSubject exposes its current value synchronously via .value or .getValue(). Plain Subjects do not have this.

const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }

Subject as a simple store

BehaviorSubject is a common lightweight state container in Angular services: hold state, expose it as a read-only observable, push updates with next.

class CounterService {
  private count$ = new BehaviorSubject(0);
  readonly value$ = this.count$.asObservable();
  increment() { this.count$.next(this.count$.value + 1); }
}

asObservable for encapsulation

Expose .asObservable() so consumers can subscribe but cannot call next() and corrupt your state.

private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()

ReplaySubject

ReplaySubject replays a configurable number of past values to new subscribers — useful for caching the last N events.

import { ReplaySubject } from 'rxjs';

const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3

Subject vs BehaviorSubject

Subject: no initial value, late subscribers miss past emissions.
BehaviorSubject: has initial value, late subscribers get the latest. For UI state, BehaviorSubject is usually what you want.

Completing a Subject

Call complete() to end the Subject. After completion, next() values are ignored and subscribers are released. Always complete subjects in services that get destroyed.

const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignored

Subjects bridge imperative and reactive

Subjects let you turn imperative events (a button click handler, a WebSocket message) into an observable stream that the rest of your app can react to declaratively.

Quick Check

Test your understanding of subjects.

Recap: Subjects & BehaviorSubject

Subjects are multicast streams you can push into.

Subject: no memory of past values.
BehaviorSubject: holds and replays the latest value; has .value.
ReplaySubject: replays the last N values.
Expose with asObservable() to protect state.

Next: unsubscribing and memory leaks.

Frequently asked questions

Is the “Subjects and BehaviorSubject” lesson free?

Yes — the full text of “Subjects and BehaviorSubject” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Subjects and BehaviorSubject”?

Multicast values with subjects. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Subjects and BehaviorSubject” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy