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

Practical, actionable ways to improve each week.

Join over 1554 other devs and dev advocates on the Developer Microskills newsletter. Each week, I send out a practical, actionable way to grow in your career. No BS, no hand-waving, but with some fun thrown in for good measure. Sign up and I'll send you the Tiny Experiments framework and worksheet. It's a simple process to help you finish what you start.

Sam Julien © 2015 - Present