Angular: Use Async-Pipe to manage Observable Subscriptions and Prevent Memory Leaks.

Ankit Maheshwari
Dec 31, 2019 · 5 min read

Async-Pipe is an Angular built in tool to manage Observable-Subscriptions. We can easily simplify functionality of an Angular code using the async pipe. Let’s learn to use Async-Pipe | Observable-Subscriptions.

Async-Pipe manages Observable-Subscriptions, Observables are the type of variables whose values are being tracked whenever changed — to make sure we always get updated value. We subscribe to an Observable to get its updated value.

We’ll learn to use Async-Pipe:

Angular Async-Pipe

The angular async pipe ‘allows the subscription to observe value of anything inside of the angular template syntax’. It also takes care of unsubscribing from observables automatically.

#1 TO CREATE -> IMPLEMENT ‘Observable’.

In this example we’ll create a component with a very simple observable that increments a value by one in every second and outputs that value.
(Basically this observable is just counting up)
Example-1:
Create a new Component or Open your own component (if you already have one). To create new, run this command👇👇

Now, open up your ***.component.ts and update the below code👇👇
(Make sure to replace HomePageComponent with your component name. Similarly the name of selector, templateUrl and styleUrls will be replaced by your name.)

(We must ‘implements OnInit’ to use ‘OnInit’. Learn more -> Click here👆)


#2 TO DISPLAY -> RESOLVE ‘Observable’.

To display the value we’ll reference the observable property and use the async pipe to resolve the observable:

Now, open up your ***.component.html and add this code👇👇

Learn more about Interpolation syntax {{ }} –> Click here👆)

The output of ‘observableNumber’ will display the count value on your screen, and increment in every second.


#3 RESOLVE ‘Observable’ — without using ‘Async-Pipe’.

A very common use case of ‘Observable’ is to display values received from a REST-Endpoint/APIs because the Angular HttpClient returns an observable.
Here we will learn to ‘Resolve Observable’ returns from ‘REST-Endpoint/APIs’.

Why we need to use the async pipe?
There are many ways we can subscribe to observables. The default way (without angular) is to subscribe the observable manually and update a separate property with the value, check example below: 👇👇
Example-2:
Open up your ***.component.ts and update the below code👇👇

We can now bind to the property without using the async pipe:
(instead of using ‘observableNumber’ we are using ‘latestValue’ to get updated value because we have already ‘subscribed observableNumber’ in the ‘ngOnInit’ function to resolve ‘Observable’)👇👇

Now, open up your ***.component.html and add this code👇👇

The output of ‘latestValue’ will display the count value on your screen — increment in every second — same as we see in previous example-1.

So why would we use the async-pipe then?

In Example-2 we subscribed to the observable manually, we also need to manually unsubscribe. Otherwise, we risk a memory leak when the component is destroyed.

To fix this, ‘we need to unsubscribe when the component is destroyed’. The best place to do that is the ‘ ngOnDestroy’ lifecycle hook:

Open up your ***.component.ts and update the below code👇👇

A cleaner and more reactive way of doing the same thing is to use the ‘rxjs takeUntil’ operator with another observable/subject that we complete when the component is destroyed. In this case, the ‘takeUntil’ operator is taking care of unsubscribing.

Open up your ***.component.ts and update the below code👇👇

  • This approach is especially useful when dealing with multiple observables per subscription, as we do not need to keep a list with all subscriptions.
  • After all, this additional syntax is not necessary when using the angular async pipe, as the pipe itself takes care of unsubscribing from the observable once the component is destroyed. So, if nothing else, the async pipe makes our code cleaner.
  • Also, the methods showed above do not work with the onPush change detection strategy, which is used to do performance optimizations of components. Async pipe, on the other hand works just fine with that.

That is why “we should definitely use the async-pipe wherever and whenever possible”.


#4 ASYNC-PIPE with *ngIf and *ngFor

With *ngIf
Interpolation {{ }} is not the only data binding to which the async pipe can be used. We can also use it with the *ngIf directive:

Now, open up your ***.component.html and try this code👇👇

Note, that the braces inside the *ngIf directive are absolutely necessary in this case.

The above <p> will only be visible when the value of ‘observableNumber$’ becomes greater than 5.

With *ngFor
We can use the async pipe for *ngFor the same way we use for *ngIf directive.
But to use the async-pipe we must need the observable of type array, not just a single value. See this👇👇

Now, we can use this in *ngFor directive like this👇👇


Conclusion

We can use Angular async-pipe to prevent memory leaks.
The things we covered are:
#1 TO CREATE -> IMPLEMENT ‘Observable’.
#2 TO DISPLAY -> RESOLVE ‘Observable’.
#3 RESOLVE ‘Observable’ — without using ‘Async-Pipe’.
#4 ASYNC-PIPE with *ngIf and *ngFor.



Done! 🤩 It’s that simple to understand ‘why to use Async-Pipe to manage Observable-Subscriptions’.

See you later 👋👋

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)

Stay connected for more articles:
https://medium.com/@AnkitMaheshwariIn


If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…


Originally published at https://www.codewithchintan.com on December 31, 2019.


JavaScript in Plain English

Learn the web's most important programming language.

Ankit Maheshwari

Written by

👨‍💻 Developer | ✍ Blogger ( I rather enjoy coding because it gives me an experience of complete absorption, almost like meditation — If Truth Be Told. )

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

More from JavaScript in Plain English

More from JavaScript in Plain English

Why you should learn React instead of Vue

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade