DATEV Nine-Nine | (X-Mas) Presents from the Async Pipe
By: Matthias Alt, Stephan Bierwirth & Gerrit Riesch
Intro
Just like Rudolph, Donner and Blitzen, the Angular Async Pipe is known as a heavy lifter and invaluable team member for delivering gifts (in the form of features 😛). In our blog we want to show you a couple of special presents the Async Pipe has hidden in its bag and how to use them.
Angular Async Pipe
If you’re a seasoned Angular developer you can skip this part because you should have encountered the async pipe on numerous occasions. The async pipe is a pipe (a more or less simple function to be used in template expressions to transform data) that’s built into Angular just like the Date or Currency pipes. It takes an observable value (or promise), subscribes to it and returns the latest value emitted.
So let’s get back to those presents..
Checking for Changes
You’re probably already familiar with the different change detection strategies and encountered change detection onPush. We don’t want to go into too much detail about change detection in this article but the onPush ChangeDetectionStrategy excludes the component (and its children) from the automatic change detection cycle and only runs change detection if an Input changes or change detection is triggered manually by e.g. markForCheck on the ChangeDetectorRef. (Hint for the Input changes: Try to use immutables because otherwise Angular wont know that the Input value changed and no change detection is triggered). That’s where the async pipe comes into play. The async pipe automatically marks the component to be checked for changes whenever a new value is emitted. That’s pretty neat. Below we have the code snippet from the Angular GutHub repo to show you the exact mechanism.
Auto subscribe
Whilst developing Angular apps and using observables it may happen that you construct your observable, add some awesome RXJs operators to it, maybe even a little side effect and just when you think you’re done you notice the observable isn’t emitting any values. No side effects triggered. Of course… Forgot to subscribe! That happens and is easily fixable. But instead of subscribing manually to the observable you can just use the async-pipe and e voila your side effects get triggered and your observable is emitting values. Why we prefer the async-pipe over manual subscription is that it’s not only less verbose and boilerplate code but also because of the feature described in the next paragraph:
Auto Unsubscribe
A common mistake, when subscribing to an observable (or promise), is to forget unsubscribing. This can have a huge impact on your application, since the subscriptions are never removed, even when your component is destroyed. This can lead to slow applications and other impacts on user-experience. If you subscribe manually to an observable, you should always unsubscribe from it in something like the ngOnDestroy-Lifecycle-Hook of the component.
Using the async-pipe, you don’t have to worry about these issues, because the async-pipe handles all the subscription related stuff. Whenever the reference of a subscription changes the async-pipe will automatically unsubscribe from the previous one and will subscribe to the new one.
Final thoughts
In our article we showed you a couple of presents the async pipe has in stall out of the box. These are awesome for developer experience and can reduce some pitfalls one might encounter. Nevertheless — as per usual with these things — one should have an idea of what happens behind the curtains to prevent unexpected behavior. Finally we want to wish you all a peaceful, happy and relaxing NX-Mas and a happy ng new year!
We hope you enjoyed our blog and we would love to see you next time!
Your three DATEV Nine-Nine detectives,
