5 RxJS in modern Angular

 

This chapter covers

  • Reactive programming principles
  • Using RxJS to build functionality that uses reactive programming
  • Unsubscribing from observables in a new way
  • Using dependency injection in custom RxJS operators

So far in this book, we have built many features using the different tools that Angular provides. We have already interacted with RxJS several times, mainly when making HTTP calls and handling them in interceptors. However, we can safely say that this is only a tiny part of all the capabilities that RxJS can give us when we are developing frontend applications. In this chapter, we are going to learn about reactive programming and explore RxJS, the first-choice tool for working in this paradigm, its complex (and sometimes sadly overengineered) relationship with Angular, and learn how new modern tools provided by the Angular team help us integrate RxJS seamlessly into our Angular applications. First, let’s understand what RxJS is used for, and what is this “reactive programming” we keep hearing about all the time.

5.1 What is reactive programming?

5.2 Why we (still) need RxJS

5.3 Unsubscribing from observables

5.3.1 Why unsubscribe?

5.3.2 Problems with unsubscribing

5.3.3 Introducing DestroyRef

5.3.4 The takeUntilDestroyed operator

5.4 Writing our own custom RxJS operators

5.4.1 What is an RxJS operator?

5.4.2 How do operators work?

5.4.3 Building custom operators

5.5 Exercises for the reader

Summary