Skip to main content

subscribe/unsubscribe in Angular

think that everyone, at least once during the code optimization, realized that they have forgotten to unsubscribe from an observable. This common issue can be very frustrating and time-consuming, especially when you are working on a complex application. Luckily, there is a solution for that.
During the optimization of the project I’m currently working on, I have encountered this issue that could be prevented by using the Async pipe. The built-in Async pipe in Angular 2+ is a great tool to manage observable subscriptions, which is why I have decided to write this article about it.
What is the Async pipe?
The Async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the Async pipe marks the component to be checked for changes. When the component gets destroyed, the Async pipe unsubscribes automatically to avoid potential memory leaks.
Benefits of using Async pipe
  • We can use onPush strategy
  • No need to use or worry about subscribe or unsubscribe
  • No need to use Angular lifecycles
  • Cleaner code
Angular strategies
  • checkAlways
  • onPush
Angular uses default checkAlwaysstrategy. This means that every component is checked when any change is detected, which will reduce the performance.
This issue can be prevented with Async pipe by using onPush strategy. This means we will minimize change detection cycles to check component only when:
  • Input properties change
  • Event emits
  • Observable emits
Using onPush detection strategy is great for performance, so we should be using the Async pipe as much as possible.
How to start using the Async pipe?
The first step is to split our application into multiple components so that every component will have component, html and service file.
With this approach, developers can easily understand the architecture of the Angular application because every component will be the same.
The file example.services.ts is like a container where we specify from where we are fetching the data for our application. The advantage of this is that all the methods that communicate with the backend will be in one place. This way, our code will become much cleaner and easier to maintain.
The next step is to add change detection in example.component.ts manually, as you can see in the picture below:
Then we will just include service in the component and get the methods we need from it. We don’t have to use Init or Destroy lifecycle in our component. We don’t have to create additional properties where we will save data we get; we will just use observables in HTML.
Therefore, we don’t have to worry if we forgot to unsubscribe in some places, and we will be sure we don’t have memory leaks in the application. Everything is done automatically.
While I was doing the optimization of my current project, I found many places where we forgot to unsubscribe, which consumed a lot of time to fix. That could have been avoided by using the Async pipe in the first place.
The last step is to write this expression in HTML so Angular would know that we are using the Async pipe. Every time our component loads, the Async pipe will be triggered, and it will automatically call the method.
Example:
Reload data on some event
You can see from the code above I used combineLatest method from rxjs to combine users observable with behavior subject. This means that every time the event is triggered, we will get the newest data. We can also use this approach if we need to combine a couple of observables into one, which can be seen in the next example.
Here I also used combineLatest from rxjs, but this time to combine observables. This can be useful when you have a component with multiple methods. In order to have cleaner and more readable code, we can combine all observables into one and use only once Async pipe in HTML.
This article is just a brief example of how we can implement the Async pipe to make our applications reactive and easier to maintain.
Thank you for reading.

Comments

Post a Comment

Popular posts from this blog

4 Ways to Communicate Across Browser Tabs in Realtime

1. Local Storage Events You might have already used LocalStorage, which is accessible across Tabs within the same application origin. But do you know that it also supports events? You can use this feature to communicate across Browser Tabs, where other Tabs will receive the event once the storage is updated. For example, let’s say in one Tab, we execute the following JavaScript code. window.localStorage.setItem("loggedIn", "true"); The other Tabs which listen to the event will receive it, as shown below. window.addEventListener('storage', (event) => { if (event.storageArea != localStorage) return; if (event.key === 'loggedIn') { // Do something with event.newValue } }); 2. Broadcast Channel API The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and  Web Workers . One Tab can create and post to a channel as follows. const channel = new BroadcastChannel('app-data'); channel.postMessage(data); And oth...
Post a Comment
Read more

Certbot SSL configuration in ubuntu

  Introduction Let’s Encrypt is a Certificate Authority (CA) that provides an easy way to obtain and install free  TLS/SSL certificates , thereby enabling encrypted HTTPS on web servers. It simplifies the process by providing a software client, Certbot, that attempts to automate most (if not all) of the required steps. Currently, the entire process of obtaining and installing a certificate is fully automated on both Apache and Nginx. In this tutorial, you will use Certbot to obtain a free SSL certificate for Apache on Ubuntu 18.04 and set up your certificate to renew automatically. This tutorial will use a separate Apache virtual host file instead of the default configuration file.  We recommend  creating new Apache virtual host files for each domain because it helps to avoid common mistakes and maintains the default files as a fallback configuration. Prerequisites To follow this tutorial, you will need: One Ubuntu 18.04 server set up by following this  initial ...
Post a Comment
Read more

Working with Node.js streams

  Introduction Streams are one of the major features that most Node.js applications rely on, especially when handling HTTP requests, reading/writing files, and making socket communications. Streams are very predictable since we can always expect data, error, and end events when using streams. This article will teach Node developers how to use streams to efficiently handle large amounts of data. This is a typical real-world challenge faced by Node developers when they have to deal with a large data source, and it may not be feasible to process this data all at once. This article will cover the following topics: Types of streams When to adopt Node.js streams Batching Composing streams in Node.js Transforming data with transform streams Piping streams Error handling Node.js streams Types of streams The following are four main types of streams in Node.js: Readable streams: The readable stream is responsible for reading data from a source file Writable streams: The writable stream is re...
Post a Comment
Read more