What is Memory leakage and how to prevent it in Angular

Young Asian software developer working over new program
Reading Time: 2 minutes


Hello readers. Today we are going to learn a very important concept in Angular which is Memory leakage. So, let’s get started

What is Memory Leakage?

A memory leak is a resource leak caused by improper management of memory. In other words, some part of your memory is still in use by a resource that is not required anymore. This is one of the worst issues a developer can face because it becomes very difficult to debug it. If memory is not managed properly, it can result in poor performance of the application.

You might send your code to production because these issues are not detected even by functional testing. And slowly this will lead to bad performance of your application or may also crash your application.

Talking about Angular, these issues are mostly caused due improper usage of Observables.

Let us see how.

constructor(private productService: ProductService) { }

ngOnInit() {
  this.productService.getAllProducts().subscribe((data) => {
    this.products = data;

Now the issue here is when we are subscribing to the getAllProducts function, we are not unsubscribing to it. That means even if you navigate from this component and now this component is not being used, then in that case it will still be subscribed and will consume memory.

Preventing Memory Leakage

In order to avoid it, follow these:


constructor(private productService: ProductService) { }

ngOnInit() {

  this.subscription$ = this.productService.getAllProducts().subscribe((data) => {

    this.products = data;






Now in this case, when you have navigated from this component, then the ngOnDestroy hook will be called and it will unsubscribe and will release the memory for it.

Async Pipe

Async pipe subscribes to an observable and always returns the latest value emitted. The best part is when the component is destroyed, it handles the unsubscription automatically. We don’t need to do it in the ngOnDestroy.

Here is a simple usage of it:

products$: Observable<Product[]>;

constructor(private productService: ProductService) { }

ngOnInit() {

  this.products$ = this.productService.getAllProducts();


In the HTML, it will be like

<div *ngFor="let product of products$ | async">




We must always take care of these points while working with Observables in Angular because these small mistakes may lead to bad performance of your application. And bad performance is not a good user experience. We covered two ways of preventing memory leaks in Angular which are unsubscribing and async pipes. Thanks for sticking to the end.

For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.

Written by 

Kiran Jeet Kaur is working as a Software Consultant in Knoldus. Her practice area is Front End. She is always open to learn new things. Her hobbies include watching movies and listening to music.