RxJS, Observables, Subjects, Async Pipe, and Stream Composition
Build the mental model needed to work with Angular asynchronous flows, events, API data, and reactive UI updates.
Inside this chapter
- Why RxJS Feels Difficult at First
- Observable Basics
- Async Pipe
- Useful Operators
- Real Example: Live Search
Series navigation
Study the chapters in order for the clearest path from Angular fundamentals to advanced architecture, testing, performance, and deployment. Use the navigation at the bottom to move smoothly across the full tutorial series.
Why RxJS Feels Difficult at First
Beginners often understand promises more quickly than Observables because promises represent one future result, while Observables represent streams over time. Angular uses Observables heavily, so learning them well pays off across HTTP, forms, router events, and component state.
Observable Basics
courses$ = this.courseService.getCourses();The dollar-sign naming convention is widely used to indicate a variable that stores an Observable stream. It is not required by the language, but it improves readability.
Async Pipe
<li *ngFor="let course of courses$ | async">
{{ course.title }}
</li>The async pipe subscribes and unsubscribes for you inside templates. It reduces manual subscription management and is usually preferable for display-only data streams.
Useful Operators
mapfor transforming valuesfilterfor keeping matching valuesswitchMapfor replacing one async stream with anotherdebounceTimefor search input throttlingcatchErrorfor controlled failure behavior
Real Example: Live Search
An Angular search box can observe user typing, debounce keystrokes, cancel stale requests with switchMap, and display the latest results only. This is a classic reactive UI pattern that shows why RxJS is valuable.