Unsubscribing and memory leaks in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to unsubscribe from the observable in ngOnDestroy.

Angular

export class MyComponent implements OnDestroy {
  subscription = this.dataService.getData().subscribe();

  ngOnDestroy() {
    this.subscription.[1]();
  }
}

Drag options to blanks, or click blank then click option'

Aunsubscribe

Bsubscribe

Cdestroy

Dcomplete

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe() again instead of unsubscribe()

Forgetting to unsubscribe in ngOnDestroy

To avoid memory leaks, you must call unsubscribe() on your subscription when the component is destroyed.

2fill in blank

medium

Complete the code to use the takeUntil operator to manage unsubscription.

Angular

private destroy$ = new Subject<void>();

ngOnInit() {
  this.dataService.getData()
    .pipe([1](this.destroy$))
    .subscribe(data => this.handleData(data));
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Drag options to blanks, or click blank then click option'

Amap

Bfilter

CtakeUntil

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map or filter which do not unsubscribe

Not calling next() and complete() on destroy$

The takeUntil operator unsubscribes automatically when the destroy$ emits, helping prevent memory leaks.

3fill in blank

hard

Fix the error in the code to properly unsubscribe from multiple subscriptions.

Angular

export class MyComponent implements OnDestroy {
  sub1 = this.service.getData1().subscribe();
  sub2 = this.service.getData2().subscribe();

  ngOnDestroy() {
    this.sub1.[1]();
    this.sub2.[1]();
  }
}

Drag options to blanks, or click blank then click option'

Asubscribe

Bunsubscribe

Ccomplete

Ddestroy

Attempts:

3 left

💡 Hint

Common Mistakes

Calling subscribe() instead of unsubscribe()

Trying to call complete() on subscriptions

Each subscription must be unsubscribed individually by calling unsubscribe() on them.

4fill in blank

hard

Fill both blanks to create a single Subscription to manage multiple subscriptions and unsubscribe properly.

Angular

export class MyComponent implements OnDestroy {
  private subscriptions = new Subscription();

  ngOnInit() {
    this.subscriptions.add(this.service.getData1().subscribe());
    this.subscriptions.add(this.service.getData2().subscribe());
  }

  ngOnDestroy() {
    this.subscriptions.[1]();
    this.subscriptions = [2];
  }
}

Drag options to blanks, or click blank then click option'

Aunsubscribe

Bnew Subscription()

Csubscribe

Dcomplete

Attempts:

3 left

💡 Hint

Common Mistakes

Not resetting the subscriptions variable after unsubscribe

Calling subscribe() instead of unsubscribe()

Calling unsubscribe() on the combined subscription stops all inner subscriptions. Then resetting it to a new Subscription avoids reuse issues.

5fill in blank

hard

Fill all three blanks to correctly use the async pipe in the template and avoid manual unsubscription.

Angular

<div *ngIf="data$ | [1] as data">
  <p>{{data.name}}</p>
</div>

export class MyComponent {
  data$ = this.service.getData().[2]();

  ngOnDestroy() {
    // No manual unsubscription needed because of [3]
  }
}

Drag options to blanks, or click blank then click option'

Aasync

Bpipe

Casync pipe

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Manually subscribing and unsubscribing when using async pipe

Using subscribe() in the component without unsubscribing

The async pipe in the template automatically subscribes and unsubscribes from observables, so manual unsubscription in ngOnDestroy is not needed.

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