Refetching Data with RxJS Subjects in Angular

One of the things that drove me crazy when I was first learning RxJS in Angular was how difficult it seemed to reload a collection of data after I added or deleted an item. With promises, I could just use .then() and be on my way. What do we do with observables? Should we just nest another subscription? Even if we do that, since we’re using the async pipe, nothing will happen. There are better ways to handle this that are more reactive. In this lesson, I’m going to show you one way using Subjects. Subjects are kind of like event emitters that can have multiple listeners.

A few vocab words I mention in this video:

• Subject: A special type of Observable that allows values to be multicasted. Think of it like an event emitter that allows multiple listeners.
• BehaviorSubject: A type of Subject that stores its latest value.
• tap operator: Performs a side effect for every emission of its source Observable.
• switchMap operator: Maps each value to an Observable, then flattens all of these inner Observables.

Check out the code on GitHub to see the result.

Helpful Links on RxJS Subjects and Refetching Data

• RxJS docs: Subjects
• RxJS docs: tap
• RxJS docs: switchMap
• Nicholas Jamieson: Understanding Subjects
• Jennifer Wadella: Understanding Multicasting Observables in Angular