Using Angular’s async pipe to unsubscribe streams automatically

As you learned in the previous recipe, it is crucial to unsubscribe the streams you subscribe to. What if we had an even simpler way to unsubscribe them when the component gets destroyed—that is, letting Angular take care of it somehow? In this recipe, you’ll learn how to use Angular’s async pipe with an observable to directly bind the data in the stream to the Angular template instead of having to subscribe in the *.component.ts file.

Getting ready

The app that we are going to work with resides in start/apps/chapter05/ng-async-pipe inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-async-pipe
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 5.5...