Angular Async Pipe — Here’s how to use it like a boss

Who else wants to use Angular’s honking powerful async pipe?

And why it makes you feel like ridding in a big elevator.

The Angular framework seems to have a crush on reactive programming.

With a special affection for RxJS.

😘 😘 😘

That’s why the RxJS library is a dependency in every Angular project that I’ve ever seen.

And it’s the reactive programming that newbies complain about — it does a splendid job of twisting their brain. That is, until they get the hang of reactive programming and then they start to enjoy it. Well… maybe not everyone but most of us get the hang of RxJS after a while… and end up with a crush on it just like the Angular framework.

But RxJS isn’t a silver bullet.

Reactive programming introduces a set of its own challenges.

Have you ever seen something like this in one of your Angular components?

$observable.subscribe((result) => { 
   // do something with the result here 
});

And then a little while later in the same file something like this?

$observable.unsubscribe();

Anytime we subscribe to an Observable we need to make sure that we unsubscribe as well. Plus, that subscribe stuff with the return result is rather…