A memory leak occurs when a section of memory that is no longer being used is still being occupied needlessly instead of being returned to the OS
In Angular components or directives, you will unsubscribe inside the
ngOnDestroy lifecycle hook.
For example, if you have a component with three subscriptions:
You need to create the
ngOnDestroy method and unsubscribe from each.
OK, that’s nice, but I want to automate the unsubscribe process. What if we could create a class
decorator that will do the work for us? Maybe something like this:
Let’s create a class decorator named
AutoUnsubscribe to clean our code.
The class decorator is applied to the
constructor of the class and can be used to observe, modify, or replace a class definition.
🤓 There are three simple steps here:
- Save a reference to the original
- Create our version of
ngOnDestroy, loop over the
classproperties and invoke the
unsubscribe()function if it exists.
- Invoke the original
ngOnDestroyfunction if it exists.
That’s all, piece of 🍰.
But wait a minute, what if for some crazy reason you need to exclude subscriptions? for example you don’t want to unsubscribe from the
$two subscription when the component is destroyed.
In this case we need to pass an argument to our decorator ( an array of excluded properties ), so we need to use a Decorator Factory:
A Decorator Factory is simply a function that returns the expression that will be called by the decorator at runtime.
We are just checking that the
property name is not in the
blacklist array before invoking the
Now we can use our decorator like this:
😃 Now we are done!
You can find the decorator here. If you have further improvements, please make a pull request.
Do not be afraid to look at the source code, it’s just a few lines.
If you liked this article, check out my previous one — Make your Code Cleaner with Decorators.
You can leverage decorators in your apps and create powerful things with them. Decorators are not only for frameworks or libraries, so be creative and start using them. You can explore the different decorators here.