Refetching Data with RxJS Subjects in Angular

First Published: May 22, 2020

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

Project list gathering dust? 👀

Drop me a line below so I can send you the Tiny Experiments framework and worksheet. It's a simple process to help you finish what you start. You'll also join over 2100 other devs and dev advocates on the Developer Microskills newsletter. In each issue of Developer Microskills, I share a practical, actionable way to grow in your career or be more effective in your work. No motivational speeches, no hand-waving, and no spam, but also no infuriating sense of self-importance that plagues so much career and productivity advice out there.

Sam Julien © 2015 - Present