Chapter 9.2☕ 15 min read

Creating Observables

RxJS provides many ways to create Observables. From simple static values to timers, intervals, and custom streams.

01of() — Emit Specific Values

of() emits each argument you pass one by one, then completes synchronously.

import { of } from 'rxjs';

// Emits three values then completes
of(1, 2, 3).subscribe(v => console.log(v));
// Output: 1 → 2 → 3 → (complete)

// Works with any types
of('Hyderabad', 'Biryani', 'Charminar').subscribe(v => console.log(v));

// Objects and arrays
of({ id: 1, name: 'Chicken Biryani' }, { id: 2, name: 'Mutton Biryani' })
  .subscribe(biryani => console.log(biryani.name));

"of = manual announcement — bolo kya bolo, ek ek karke."

Use cases:

Returning a fallback value from catchError: return of([])
Testing: creating predictable Observable streams
Combining with other operators: startWith('loading')

Values are emitted synchronously — all values are emitted in the same microtask, then the observable completes.

02from() — Convert to Observable

from() converts an array, Promise, string, or any iterable into an Observable.

import { from } from 'rxjs';

// Array → Observable
from([10, 20, 30, 40]).subscribe(v => console.log(v));
// 10 → 20 → 30 → 40

// String → character stream
from('Hello').subscribe(v => console.log(v));
// H → e → l → l → o

// Promise → Observable
from(fetch('/api/biryani')).subscribe(response => {
  console.log('Response:', response);
});

// Set, Map, any iterable
from(new Set(['a', 'b', 'c'])).subscribe(v => console.log(v));

"from = converter — koi bhi iterable ko stream bana do."

of vs from recap:

of(1, 2, 3).subscribe(v => console.log(v)); // 1, 2, 3
from([1, 2, 3]).subscribe(v => console.log(v)); // 1, 2, 3

// BUT:
of([1, 2, 3]).subscribe(v => console.log(v)); // [1, 2, 3] — array as single value!
from([1, 2, 3]).subscribe(v => console.log(v)); // 1, 2, 3 — iterated!

of([1,2,3]) emits the entire array as ONE value. from([1,2,3]) iterates the array and emits each element separately.

03interval() and timer()

interval() and timer() create time-based Observables.

import { interval, timer } from 'rxjs';

// interval(period) — emits 0, 1, 2... every N ms
interval(1000).subscribe(v => console.log(v));
// 0 (at 1s), 1 (at 2s), 2 (at 3s)... NEVER COMPLETES

// timer(dueTime) — emits 0 after N ms, then completes
timer(3000).subscribe(v => console.log(v));
// 0 (at 3s), then complete

// timer(dueTime, period) — emits 0 after N ms, then every M ms
timer(3000, 1000).subscribe(v => console.log(v));
// 0 (at 3s), 1 (at 4s), 2 (at 5s)... NEVER COMPLETES

"interval = metronome — regular beat, kabhi nahi rukta."

"timer = alarm clock — ek baar bajao ya repeat karo."

⚠️ CRITICAL: Both interval() and timer() with period NEVER COMPLETE. They MUST be unsubscribed or used with operators like take(n) to prevent memory leaks.

// Safe pattern: take(5) auto-completes after 5 values
interval(1000).pipe(take(5)).subscribe(v => console.log(v));
// 0, 1, 2, 3, 4 → auto-completes

04Custom Observable with new Observable()

For full control, create an Observable manually with the Observable constructor.

import { Observable } from 'rxjs';

const customObservable = new Observable(subscriber => {
  // Emit values
  subscriber.next('Step 1: Order placed');
  subscriber.next('Step 2: Cooking started');
  subscriber.next('Step 3: Biryani ready!');

  // Complete the stream
  subscriber.complete();

  // Optional: Error
  // subscriber.error(new Error('Kitchen on fire!'));

  // Cleanup function — runs on unsubscribe or complete
  return () => {
    console.log('Cleanup: cancelling order...');
  };
});

customObservable.subscribe({
  next: msg => console.log(msg),
  error: err => console.error(err),
  complete: () => console.log('Order delivered!'),
});

"Custom observable = apna TV channel banao — jo chaho bolo."

Important methods:

subscriber.next(value) — emit a value
subscriber.complete() — end the stream
subscriber.error(err) — emit an error
Return function — teardown/cleanup logic (like removing event listeners)

Returning a cleanup function is optional but IMPORTANT — it runs when the subscriber unsubscribes or when the stream completes. This is where you free resources, remove listeners, cancel timers.

05NEVER, EMPTY, throwError

Three special Observables for edge cases:

import { NEVER, EMPTY, throwError } from 'rxjs';

// NEVER — never emits, never completes (infinite hang)
NEVER.subscribe({
  next: v => console.log(v), // NEVER CALLED
  complete: () => console.log('done'), // NEVER CALLED
});
// Useful for: testing race conditions, as source for switchMap

// EMPTY — emits nothing, completes immediately
EMPTY.subscribe({
  next: v => console.log(v), // NEVER CALLED
  complete: () => console.log('done'), // CALLED IMMEDIATELY
});
// Useful for: default fallback in concat, as empty result

// throwError — emits error, then dies
throwError(() => new Error('Bhai nahi hua')).subscribe({
  error: err => console.error(err.message), // CALLED
});
// Useful for: simulating errors, error fallback

"NEVER = blank screen, EMPTY = the end (nothing happened), throwError = error screen."

Real-world use cases:

EMPTY — as fallback in catchError(() => EMPTY) — silently swallows error
NEVER — blocking navigation until a condition is met
throwError — in testing, custom error scenarios

Key Takeaways

✅ of(values) — emit specific values synchronously, then complete
✅ from(iterable) — convert array/Promise/string to Observable (iterates each element)
✅ interval(ms) — emits every N ms (never completes); timer(delay, period) — delayed start
✅ new Observable(subscriber => { next, error, complete, return cleanup }) — full control
✅ NEVER (never emits), EMPTY (completes instantly), throwError (emits error)

Previous9.1 — Observable vs Promise 📋 All Chapters Next Chapter9.3 — Subscriptions →