RxJS 7 and Observables: Introduction

Explore marble diagrams to visualize the notifications emitted by observables and understand their behavior across subscription scenarios. Use these diagrams to clarify observable concepts in this course.

Practice building and managing RxJS observables by creating new observables and handling subscribe and unsubscribe. Explore the full subscription lifecycle, from start through next emissions to error, complete, and teardown.

Create an empty observable with the new Observable constructor, import from RxJS, and subscribe to confirm it emits no values. The subscribe call immediately runs the observable logic, not asynchronous.

Learn to emit an error notification four seconds after subscription using setTimeout and handle it in the observer's error method, including a JavaScript error object and teardown execution.

Examine the observer object with next, error, and complete handlers, then explore emitting after the subscription ends when order is mixed.

Explore the observable lifecycle from subscribing to teardown, including emitting notifications, handling them with observer functions, and ending on error, complete, or unsubscribe to prevent memory leaks.

Explore cold observables, where each subscription triggers independent emissions and HTTP requests, illustrated by multiple subscriptions calling an ajax observable to fetch unique random names.

Explore the differences between hot and cold observables, showing how cold observables emit new data on each subscription while hot observables multicast an existing source to active subscribers.

Convert arrays, promises, and iterables into observables with the from function, emitting array values as next notifications, and resolving or rejecting promises as next or error in a cold observable.

Create observables from DOM events using fromEvent, subscribe to click events, handle typing with MouseEvent, and implement teardown to unsubscribe and prevent memory leaks, comparing with a custom observable.

Explore how the RxJS timer creates an observable that waits two seconds, emits the value 0, and completes, with teardown logic to prevent memory leaks during subscription and unsubscription.

Simulate an http-like forkJoin scenario where one request errors, causing forkJoin to fail and end subscriptions. Review teardown behavior as subscriptions cancel and teardown logic runs, ensuring proper cleanup.

Explore how pipeable operators turn a source observable into a new, extended observable by transforming notifications in a stacked pipeline before they reach the observer, starting with the filter operator.

Explore the debounceTime operator in RxJS 7, debouncing incoming values by two thousand milliseconds and reemitting the latest value to reduce unnecessary recalculations and HTTP requests.

CatchError catches an error from a source observable and switches to fallback observable, preserving values. Emit a fallback value with the of function, or use EMPTY to complete without data.

Flattening operators like concatMap, switchMap, mergeMap, and exhaustMap create new inner subscriptions for each next notification, enabling server queries on input changes while handling errors.

Apply catchError directly to the inner ajax observable to convert errors into complete notifications, so concatMap's inner completes without emitting to the outer subscription, keeping the main data stream alive.

Explore pipeable operators in RxJS to create new observables with extra logic, including filtering, mapping, tap for debugging, debouncing for performance, catch errors with a fallback source, and flattening operators.