Unsubscribing and memory leaks in Angular - Mini Project: Build & Apply

Prevent Memory Leaks by Unsubscribing in Angular

📖 Scenario: You are building a simple Angular component that listens to a timer observable. This timer emits a number every second. To keep your app healthy, you need to stop listening when the component is removed to avoid memory leaks.

🎯 Goal: Build an Angular standalone component that subscribes to a timer observable and properly unsubscribes when the component is destroyed.

📋 What You'll Learn

Create a standalone Angular component named TimerComponent

Import CommonModule and RxJS timer function

Subscribe to a timer observable that emits every 1000 milliseconds

Store the subscription in a variable called subscription

Unsubscribe from the observable inside the ngOnDestroy lifecycle method

💡 Why This Matters

🌍 Real World

In real Angular apps, components often subscribe to data streams like user input, HTTP requests, or timers. Properly unsubscribing prevents memory leaks and keeps apps fast and responsive.

💼 Career

Understanding how to manage subscriptions and avoid memory leaks is essential for Angular developers to build reliable and maintainable applications.

1

Set up the Angular component and import timer

Create a standalone Angular component called TimerComponent. Import Component and OnDestroy from '@angular/core' and timer from 'rxjs'. Inside the component, create a public property called count initialized to 0.

Angular

import { Component, OnDestroy } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-timer',
  standalone: true,
  imports: [],
  template: `Count: {{ count }}`
})
export class TimerComponent implements OnDestroy {
  count = 0;
  // Your code here
}

Hint

Remember to add standalone: true in the component decorator and import timer from 'rxjs'.

2

Create a subscription variable

Add a property called subscription of type any to hold the subscription object from the timer observable.

Angular

import { Component, OnDestroy } from '@angular/core';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-timer',
  standalone: true,
  imports: [CommonModule],
  template: `Count: {{ count }}`
})
export class TimerComponent implements OnDestroy {
  count = 0;
  subscription: any;
  // Your code here
}

Hint

Declare subscription as a property to store the subscription object.

3

Subscribe to the timer observable

Inside the component class, subscribe to the timer(0, 1000) observable and assign the subscription to the subscription property. Update the count property with the emitted value inside the subscription callback.

Angular

import { Component, OnDestroy } from '@angular/core';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-timer',
  standalone: true,
  imports: [CommonModule],
  template: `Count: {{ count }}`
})
export class TimerComponent implements OnDestroy {
  count = 0;
  subscription: any;

  constructor() {
    // Subscribe to timer here
  }
}

Hint

Use timer(0, 1000).subscribe() and assign it to this.subscription. Update this.count inside the callback.

4

Unsubscribe in ngOnDestroy to prevent memory leaks

Implement the ngOnDestroy method. Inside it, call unsubscribe() on the subscription property to stop listening to the timer when the component is destroyed.

Angular

import { Component, OnDestroy } from '@angular/core';
import { timer } from 'rxjs';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-timer',
  standalone: true,
  imports: [CommonModule],
  template: `Count: {{ count }}`
})
export class TimerComponent implements OnDestroy {
  count = 0;
  subscription: any;

  constructor() {
    this.subscription = timer(0, 1000).subscribe(value => {
      this.count = value;
    });
  }

  ngOnDestroy() {
    // Unsubscribe here
  }
}

Hint

Inside ngOnDestroy, call this.subscription.unsubscribe() to clean up.

Practice

1. Why is it important to unsubscribe from Observables in Angular components?

easy

A. To make the component load faster initially.

B. To prevent memory leaks by stopping ongoing subscriptions when the component is destroyed.

C. To increase the number of active subscriptions.

D. To automatically refresh the component view.

Solution

1. Step 1: Understand Observable subscriptions

   Subscriptions keep listening to data streams, even if the component is gone.

2. Step 2: Recognize the effect of not unsubscribing

   Not unsubscribing causes memory to be used unnecessarily, leading to leaks.

3. Final Answer:

   To prevent memory leaks by stopping ongoing subscriptions when the component is destroyed. -> Option B

4. Quick Check:

   Unsubscribe to avoid memory leaks = B [OK]

Hint: Unsubscribe in ngOnDestroy to avoid leaks [OK]

Common Mistakes:

• Thinking Angular unsubscribes automatically
• Believing unsubscribing improves load speed
• Ignoring memory leaks from active subscriptions

2. Which of the following is the correct way to unsubscribe from a subscription in Angular's ngOnDestroy method?

easy

A. this.subscription.unsubscribe();

B. this.subscription.stop();

C. this.subscription.close();

D. this.subscription.cancel();

Solution

1. Step 1: Recall Subscription API

   The Subscription object has an unsubscribe() method to stop listening.

2. Step 2: Identify correct method name

   Only unsubscribe() is valid; others do not exist on Subscription.

3. Final Answer:

   this.subscription.unsubscribe(); -> Option A

4. Quick Check:

   Use unsubscribe() to stop subscription = D [OK]

Hint: Use unsubscribe() method to stop subscriptions [OK]

Common Mistakes:

• Using non-existent methods like stop() or cancel()
• Forgetting to call unsubscribe() at all
• Calling unsubscribe() outside ngOnDestroy

3. Consider this Angular component snippet:

export class MyComponent implements OnDestroy {
  private sub = this.service.getData().subscribe(data => console.log(data));

  ngOnDestroy() {
    // missing unsubscribe
  }
}

What will happen if this component is created and destroyed multiple times without adding unsubscribe in ngOnDestroy?

medium

A. Memory usage will increase over time due to active subscriptions not being cleaned up.

B. The component will automatically unsubscribe, so no issues occur.

C. The subscription will throw an error immediately on component destroy.

D. The component will reload data only once and then stop.

Solution

1. Step 1: Analyze missing unsubscribe

   Without calling unsubscribe, the subscription stays active even after component destruction.

2. Step 2: Understand consequences

   Repeated creation and destruction cause multiple active subscriptions, increasing memory use.

3. Final Answer:

   Memory usage will increase over time due to active subscriptions not being cleaned up. -> Option A

4. Quick Check:

   Missing unsubscribe causes memory leaks = A [OK]

Hint: No unsubscribe means memory leaks grow with component reuse [OK]

Common Mistakes:

• Assuming Angular auto-unsubscribes
• Expecting errors on destroy without unsubscribe
• Thinking subscription stops automatically

4. Identify the problem in this Angular component code related to unsubscribing:

export class DemoComponent implements OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    this.subscription = this.service.getData().subscribe();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe;
  }
}

medium

A. The subscription is unsubscribed twice.

B. Subscription is declared but never assigned.

C. ngOnDestroy is missing the unsubscribe call.

D. The unsubscribe method is not called; it is referenced without parentheses.

Solution

1. Step 1: Check unsubscribe usage

   The code uses this.subscription.unsubscribe; without parentheses, so the method is not executed.

2. Step 2: Understand effect

   Without calling unsubscribe(), the subscription remains active, causing memory leaks.

3. Final Answer:

   The unsubscribe method is not called; it is referenced without parentheses. -> Option D

4. Quick Check:

   Call unsubscribe() with () to execute it = A [OK]

Hint: Always call unsubscribe() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on unsubscribe
• Assuming referencing method unsubscribes
• Not assigning subscription before unsubscribe

5. You have multiple subscriptions in an Angular component. Which is the best way to manage unsubscribing all of them efficiently?

hard

A. Ignore unsubscribing because Angular handles it automatically.

B. Manually call unsubscribe() on each subscription separately in ngOnDestroy.

C. Store all subscriptions in a Subscription object and call unsubscribe() once in ngOnDestroy.

D. Use setTimeout to delay unsubscribing after component destruction.

Solution

1. Step 1: Understand managing multiple subscriptions

   Using a Subscription object lets you add multiple subscriptions and unsubscribe all at once.

2. Step 2: Compare with manual unsubscribing

   Manual unsubscribing is error-prone and verbose; Subscription.add() simplifies cleanup.

3. Final Answer:

   Store all subscriptions in a Subscription object and call unsubscribe() once in ngOnDestroy. -> Option C

4. Quick Check:

   Use Subscription.add() and one unsubscribe() call = C [OK]

Hint: Use Subscription.add() to group and unsubscribe once [OK]

Common Mistakes:

• Forgetting to unsubscribe all subscriptions
• Relying on Angular to auto-unsubscribe
• Using setTimeout which delays cleanup unnecessarily