RxJS Crash Course - Reactivex From Zero to Hero

Explore how RxJS uses pattern of observables and observer to turn a data provider into a stream of data that notifies subscribers of new data, in synchronous or asynchronous code.

Explore RxJS of and from operators to create observables, subscribe to a data stream, and render numbers in an Angular app using simple examples.

Convert any JavaScript data source into RxJS observables using of and from, including arrays, promises, and DOM events, and subscribe to reveal transformed streams.

Explain differences between observables and promises; converting an observable to a promise is an anti-pattern, use firstValueFrom for a single value, while observables emit multiple values, are cancellable and lazy.

Learn to subscribe to observables using next, error, and complete, converting a promise with from and handling success, errors, and completion in the stream.

Create a custom observable by passing an observer to new observable, emit with observer.next, and control termination with observer.complete, recognizing next, error, complete, and unsubscribe.

Learn how to implement a custom observer as a reusable class in RxJS, with next, error, and complete handlers for a numbers stream from 1 to 5.

RxJS observables are asynchronous, like promises, so code inside subscribe runs later. Always treat streams of data as asynchronous, even when plain data appears synchronous.

Discover how the RxJS map operator transforms a stream of users into an array of names using pipe, keeping the transformation in the observable rather than in subscribe.

Learn how the RxJS filter operator filters the value emitted by an observable using pipe and a predicate, not the array itself, and when to use map instead.

This video shows how to combine filter and map in a RxJS pipe, filtering active users and mapping them to their names.

Explore marble diagrams to visualize how RxJS methods work, including from, map, and filter, with interactive examples like dragging marbles on the Redux marbles website to see emits and transforms.

Learn to perform http requests with RxJS in angular by using the http client, json server for mock apis, and typing responses with interfaces, then subscribe to observable results.

Explore how the Angular async pipe renders an observable of comments from an http get with minimal code, eliminating manual subscribe calls for a declarative template.

Learn to handle http.get errors in RxJS by using subscribe with an error callback and by catching errors inside pipe with catchError, returning of([]) to keep the UI stable.

Learn to unsubscribe RxJS subscriptions, using manual unsubscribe, take one, and take until, with Angular interop take until destroyed for cleanup.

Fetch data with the RxJS Ajax method to get an observable of the response, including status and data, from your API, and define a Comment interface for the comments array.

Explore the RxJS operator decision tree to choose the right operator for your observable problems, from ignoring values to skipping nulls, with practical skip examples.

Combine latest merges multiple streams into one data observable, producing a single object with users and a message promise, and waits for all streams to emit before updating.

Transform a backend state observable into a declarative state$ using rxjs filter and map, and render with the async pipe in the template, discarding nulls and camelCase fields.

Learn how forkjoin combines multiple API calls from observables in parallel, returning a single object with named keys posts and comments, an alternative to Promise.all.

Use latest from to read the current value from another observable while emitting from the main post stream. The example fetches API posts and reads the initial custom value.

Explore distinct operators in RxJS to cache streams and emit unique values, using distinct by age, distinct until changed, and distinct until key changed with practical user examples.

Filter the cars stream to emit only black or red, map to the car color, and emit only when the color changes using distinct until changed.

Use the debounceTime operator to limit input emissions from valueChanges in RxJS, reducing API calls; compare debounce with throttle and throttleTime, with practical reactive forms examples and 500 ms delay.

Explore how throttle operators work in RxJS, contrasting them with bones (debounce), emit at the start and block subsequent values for a set interval, demonstrated with a 500 ms example.

Learn how to use the tap method to debug RxJS streams, logging each emission from an interval and after every operator. Use tapping sparingly to avoid imperative side effects.

Explore RxJS subjects, subscribing like an observable and emitting data with next to share user arrays, while noting that a subject does not hold a value.

Explore how a behavior subject differs from a subject by prefilling a default value, using get value and next to manage a shared array of users in an Angular service.

Create and manage a todo service using rxjs behavior subject to store an array of todos, with add todo, remove todo, and toggle todo by id.

Explore how a replace subject replays previously emitted values for new subscribers, unlike a plain subject, making it handy for chats to deliver old messages.

Explore the differences between RxJS mergeMap, flatMap (deprecated), concatMap, switchMap, and exhaustMap, showing how each flattens inner observables, controls concurrency, and when to use them for sequential or parallel requests.

Refactor an RxJS task to avoid callback hell by chaining observables with concatMap, fetching a user by id and then their detail using slug, and mapping to a single message.

Learn how to use the RxJS retry function to automatically reattempt a failed API call, with a configurable count and optional delay between retries.

Apply RxJS by building your own projects, expect errors, search Google for fixes, and pursue ideas like Trello or an e-commerce shop to master it.